Tālāk sniegtais piemērs nedarbosies:

Rindkopa un tajā taukains elements, un šeit tas ir slīpi elements.

Šeit taukains Un uzsvēra elementi, vairāk slīpi.

Reālāks piemērs

Apskatīsim, kā darbojas blakus esošais atlasītājs, izmantojot reālistiskāku piemēru. Lielos rakstos, kas satur vairākas sadaļas, kas atzīmētas ar tagiem

, ir ieteicams palielināt augšējo malu (margin-top īpašība). 30 pikseļu atkāpe padarīs tekstu lasāmu. Bet ja birka

nāk uzreiz pēc tam

, un tas varētu būt raksta sākumā, augšējā atkāpē virs taga

būs liekas. Šo problēmu var atrisināt, izmantojot blakus esošo elementu atlasītāju.

Šeit ir html kods ar piemēru, kā darbojas blakus esošo elementu atlasītājs.

Sveiki!

Virsraksts h2

Virsraksts h2

Rindkopas teksts ir par neticamiem piedzīvojumiem.

Virsraksts h2

Rindkopas teksts ir par neticamiem piedzīvojumiem.

Virsraksts h2

Rindkopas teksts ir par neticamiem piedzīvojumiem.

Tāpat, izmantojot blakus esošo atlasītāja rīku, ir ērti pielāgot atkāpi starp virsrakstu un sadaļas pirmo rindkopu, mūsu piemērā tie ir tagi

Un

Ir arī vērts atzīmēt, ka, lai samazinātu atkāpi, ir ērti izmantot negatīvas vērtības.

Sveiki!

Virsraksts h2

Rindkopas teksts ir par neticamiem piedzīvojumiem.

Virsraksts h2

Rindkopas teksts ir par neticamiem piedzīvojumiem.

Virsraksts h2

Rindkopas teksts ir par neticamiem piedzīvojumiem.

Virsraksts h2

Rindkopas teksts ir par neticamiem piedzīvojumiem.

Tagad piemērs tam, kā izmantot blakus esošo atlasītāju, lai atlasītu visus saraksta elementus, izņemot pirmo.

• Saraksta vienums Nr. 1.
• Saraksta vienums Nr. 2.
• Saraksta vienums Nr. 3.
• Saraksta vienums Nr. 4.

Lūk, kas notiks šī piemēra rezultātā:

1. attēls. Piemērs Nr.5 darbā.

2015. gada 1. jūnijs

Turpretim blakus esošie tiek izmantoti retāk. Galvenā atšķirība ir tā, ka viņiem ir jāseko otram. Lai jums būtu vieglāk saprast šo tēmu, es ierosinu parsēt šo struktūru:

<тег1> <тег2> <тег3> <тег4> <тег5><тег6>...

Kā jūs droši vien uzminējāt no iepriekšējās nodarbības, tagi 2, 3, 4, 5, 6 ir konteksta atlasītāji tag1. Savukārt blakus atlasītāji būs: tags2 un tags3, tags4 un tag5, bet tajā pašā laikā tag2 Un tag4 nav blakus. Stila rekvizīti tiks lietoti pēdējam elementam, kuru norādāt kā blakus. Jums tikai jāievēro atlasītāju secība. Vispārējā rakstīšanas sintakse ir šāda:

Selector1 + selektors2+ ...+selektorsN ( rekvizīts1: vērtība; rekvizīts2: vērtība; ... rekvizītsN: vērtība)

Apskatīsim šo piemēru:

Virsraksts

Tag lpp ir atzīmei blakus esošais atlasītājs h1

Šim tekstam jābūt zaļam

Kaimiņos CSS atlasītāji

Blakus esošie CSS atlasītāji jeb brāļu atlasītāji, kā tos sauc arī, ļauj elementam piemērot stilus gadījumos, kad tas parādās pirms noteikta elementa HTML kodā, tas ir, elementiem šajā gadījumā ir jābūt vienā ligzdošanas līmenī. . Arī blakus esošie atlasītāji ir salikti, un tos veido vienkārši atlasītāji (klases, identifikatori utt.).

Lai jūs skaidri saprastu, kas ir blakus esošie elementi, vēlreiz apskatīsim pazīstamo piemēru, tikai nedaudz pārveidotu.

<тег1> <тег2>... <тег3><тег4>... <тег5><тег6>...

Šajā piemērā ir tikai divi blakus esošo elementu pāri - tie ir<тег2>Un<тег3>, un arī<тег3>Un<тег5>, Viss. Tas ir<тег2>Un<тег5>vairs nav kaimiņi viens pret otru, jo starp viņiem pastāv<тег3> .

Blakus esošie atlasītāji tiek veidoti no diviem vai vairākiem regulāriem atlasītājiem, kas atdalīti ar “+” (plus) zīmi, kur vispirms tiek norādīts pats pirmais koda elements, pēc tam tas, kas nāk aiz tā, tad tas, kas nāk tūlīt pēc otrā. , un tā tālāk. Kā parasti, stili tiek lietoti elementam, kura atlasītājs ir pēdējais sarakstā. Vispārējā sintakse.

selektors1 + selektors2 ( īpašums: vērtība; īpašums: vērtība; ...)

Atstarpes abās "+" zīmes pusēs var novietot vai nē, pēc vēlēšanās.

Piemērs blakus esošo atlasītāju izmantošanai CSS

Virsraksts

Teksts. Spēcīgs. Teksts. Em.

Teksts. Em. Teksts. Spēcīgs.

Teksts. Em. Teksts. Spēcīgs.

Rezultāts pārlūkprogrammā

Virsraksts

Teksts. Spēcīgs.

Teksts. Em.

Teksts. Em.

Teksts. Em. Teksts. Spēcīgs.Šajā piemērā tikai pirmajā rindkopā ir sarkans teksts un tikai otrā rindkopa ir pasvītrota, jo neviens cits elements neatbilst stila kārtulām. Jo īpaši elementa saturs šajā gadījumā nebūs zaļš, jo to no virsraksta atdala nevis viena, bet divas rindkopas. Starp citu, kā redzat, otrajā stilā blakus un bērnu atlasītāji tika norādīti uzreiz. Tāpēc es nolēmu jums vēlreiz atgādināt, ka selektori

dažādi veidi

var brīvi kombinēt.

1. Internet Explorer 6.0 nesaprot blakus esošos atlasītājus (vai bērnu atlasītājus). Atcerieties šo.
2. Mājas darbs.