Sveiki, dārgie lasītāji! Turpinot CSS atlasītāju tēmu, es vēlos pievērst jūsu uzmanību bērnu un konteksta atlasītāju apraksts, kā arī to salīdzinošā analīze, jo saskaņā ar to pielietošanas loģiku tie ir ļoti līdzīgi, lai gan tiem ir dažas atšķirības.

Savās publikācijās es detalizēti aplūkoju dažāda veida CSS selektorus :; kā arī . Starp citu, pēdējā rakstā, kurā tika aplūkoti dažāda veida atribūtu atlasītāji, es detalizēti aprakstīju, kā manus teorētiskos aprēķinus var nekavējoties pārbaudīt, tiešsaistē veicot izmaiņas HTML un CSS kodā, izmantojot iebūvēto Google Chrome rīku () . Šādiem rediģēšanas rīkiem ir visu populārāko pārlūkprogrammu jaunākās modifikācijas, ieskaitot Firefox spraudni Firebug ().

Varat arī izpētīt šīs ziņas teorētisko materiālu, rediģējot jebkuras vietnes lapu! Lai to izdarītu, vienkārši nospiediet taustiņu F12, ja izmantojat Google Chrome vai Mozilla Firefox (). Un tagad es iepazīstināšu ar p tagu saturu, uz kura piemēra mēs pētīsim bērnu un konteksta CSS atlasītāji:

Šis punkts ietver formatēšanas tagi ir spēcīgi kas izceļ tekstu treknrakstā un kursīvā.

Izmantojot iepriekš minēto rediģēšanas rīku, es ievietoju šo rindkopu tieši šajā rakstā, rediģēšanas loga kreisajā pusē ierakstot atbilstošo tekstu, kā rezultātā šīs rindkopas teksts parādījās pašā lapas augšdaļā:

Šī HTML konstrukcija ,. Šis punkts būs eksperimentāls šodienas publikācijā, izmantojot tā piemēru, es parādīšu, kā mainās tā teksta noformējums atkarībā no tā, kuri atlasītāji - bērns vai konteksts - tiek izmantoti CSS kārtulā.

Bērns ir elements, kas atrodas tieši vecāku iekšienē... Pirms turpināt tieši pie tēmas, es sniegšu attēlu, kas atspoguļo HTML dokumenta tagu hierarhiju, izmantojot rindkopas piemēru, kura teksts ir sniegts iepriekš un kuru mēs analizēsim šodien:

Šo dizainu sauc arī par elementu koku. Šis attēls skaidri parāda konteineru ligzdošanu, kas nozīmē hierarhiskas attiecības starp tagiem. P rindkopas tags ir relācijas bērns. Tajā pašā laikā stiprā atzīme nav div bērna bērns, jo tā atrodas p konteinerā.

Bērna CSS atlasītājs

Elementu kokā esošais bērnu atlasītājs vienmēr atrodas tieši vecākelementā, un tādā gadījumā CSS selektora rakstīšanas sintakse ir šāda:

Stils tiks lietots 2. selektoram, bet tikai tad, ja tas ir 1. selektora bērns. Sadalīsim to sīkāk, izmantojot iepriekš redzamo ekrānuzņēmumu ar elementu koku. Piemēram, ievērojot sintaksi, varat iestatīt šādu kārtulu:

P> em (krāsa: zaļa;)

Šis noteikums ietekmēs rindkopas pēdējo vārdu “kursīvā”, jo tas ir viens starp sākuma un aizvēršanas em tagiem. Em tag ir p bērns, jo tas ir ievietots tieši tajā, tāpēc satura teksts, proti, vārds “kursīvs”, būs zaļā krāsā.

Tomēr otrs em tags nav tiešs p tagu pēctecis, jo tas ir daļa no spēcīgā taga, un tāpēc rindkopas daļa “em un strong formating tags” netiks iekrāsota.

Kontekstuālais CSS atlasītājs

Ir pienācis laiks to izdomāt kas ir CSS konteksta atlasītājs... Kodējot konkrētu vietnes lapu, tagi ļoti bieži tiek ievietoti savā starpā. Lai šādu elementu stili darbotos pareizi, tiek izmantoti atlasītāji, kas darbojas kādā kontekstā, līdz ar to arī nosaukums.

Ja CSS kārtulas piemērošanai bērnu selektoram obligāti jāatrodas tieši vecāku elementa iekšpusē (pirmais ligzdošanas līmenis), tad konteksta atlasītājam tas ir pilnīgi mazsvarīgi un var piemērot jebkuru ligzdošanas līmeni. elementa īpašības tiks nodotas no vecāka. Šajā gadījumā sintakse ir šāda:

Kā redzat, konteksta atlasītājs sastāv no vienkāršiem atlasītājiem, kurus atdala atstarpe. Kontekstuālajiem atlasītājiem ir atļauts izmantot divus vai vairākus ligzdotus tagus. Tagad izveidosim CSS kārtulu testa rindkopai, kuru es sniedzu iepriekš:

P em (krāsa: zaļa;)

Kā redzat, zaļš ir ne tikai rindkopas satura daļas teksts, kas ir tieši ievietots em formatēšanas tagā, tas ir, vārds “kursīvs”, bet arī citas em taga teksta sadaļa, kas ir arī daļa no stiprā taga. Tas notika tāpēc, ka ir spēkā noteikums ar konteksta atlasītāju, kuram ligzdošanas līmenis atšķirībā no bērnu selektora nav svarīgs. Šī ir būtiska atšķirība starp bērnu un konteksta atlasītājiem.

Apskatīsim vēl vienu piemēru, kā konteksts un bērnu atlasītāji mijiedarbojas ar mūsu rindkopu. Iestatīsim šādus CSS noteikumus bērna un konteksta atlasītājiem:

Div em (krāsa: sarkana;) p> em (krāsa: zaļa;)

Pēc tam mūsu punkts iegūst šādu dizainu:

Kā redzat, em un strong tagos ievietotais teksta gabals ir nokrāsots sarkanā krāsā, jo tam ir derīgs konteksta atlasītāja noteikums, tas ir, em tags ir ieslēgts spēcīgos un div konteineros un ligzdošanas līmenis, kā jau atzīmēja, nav nozīmes ...

Rodas jautājums: kāpēc vārds “kursīvs”, kas ir arī em saturs, ir iekrāsots zaļā krāsā? Galu galā viņam ir svarīgs konteksta atlasītāja noteikums. Bet šai rindkopas teksta sadaļai ir taisnība arī bērnu atlasītāja kārtula, jo tā nav pretrunā ar nosacījumu, ka bērnu atlasītājam elementam jābūt tieši p taga tagam.

Fakts ir tāds, ka CSS gadījumā zemāk esošajiem CSS rekvizītiem ir prioritāte. Tas ir, šajā gadījumā pakārtotā atlasītāja kārtula dokumentā ir zemāka nekā CSS stili, kas rakstīti div konteinera kontekstuālajam atlasītājam. Tāpēc vārds “slīpraksts” kļuva zaļš. Ja tos nomainīsit, likums "p> em (krāsa: zaļš;)" vairs netiks piemērots, un teksta sadaļa "kursīvā" būs sarkana.

Apraksts

: N-bērna pseidoklase tiek izmantota elementu veidošanai, pamatojoties uz numerāciju elementu kokā.

Sintakse

elements: n-bērns (nepāra | pāra |<число> | <выражение>) {...}

Vērtības

nepāra Visi nepāra elementu numuri. pat Visi pāra elementu numuri. numurs Bērna kārtas numurs attiecībā pret vecākiem. Numerācija sākas ar 1, tas būs pirmais vienums sarakstā. izteiksme Norādīta kā + b, kur a un b ir veseli skaitļi, un n ir skaitītājs, kas automātiski iegūst vērtību 0, 1, 2 ...

Ja a ir vienāds ar nulli, tad tas netiek rakstīts un ieraksts tiek saīsināts līdz b. Ja b ir vienāds ar nulli, tad tas arī nav norādīts un izteiksme tiek ierakstīta formā an. a un b var būt negatīvi skaitļi, tādā gadījumā plus zīme mainās uz mīnus, piemēram: 5n-1.

Izmantojot a un b negatīvās vērtības, daži rezultāti var būt arī negatīvi vai nulle. Tomēr elementus ietekmē tikai pozitīvās vērtības, jo elementu numerācija sākas ar 1.

Tabula 1. sarakstā ir uzskaitīti daži iespējamie izteicieni un atslēgvārdi, kā arī norādīti izmantojamie preču numuri.

HTML5 CSS3 IE Cr Op Sa Fx

	2134	2135	2136	2137	2138
Eļļa	16	34	62	74	57
Zelts	4	69	72	56	47
Koks	7	73	79	34	86
Akmeņi	23	34	88	53	103

Šajā piemērā: n-bērna pseidoklase tiek izmantota tabulas pirmās rindas stila maiņai, kā arī visu pāra rindu krāsošanai (1. attēls).

Pēdējā atjaunināšana: 21.04.2016

Īpašu pseidoklases grupu veido pseidoklases, kas ļauj atlasīt konkrētus bērnus:

: pirmais bērns: apzīmē elementu, kas ir pirmais bērns

: pēdējais bērns: apzīmē elementu, kas ir pēdējais bērns

: only-child: apzīmē elementu, kas ir vienīgais bērns kādā konteinerā

: only-of-type: atlasa elementu, kas ir vienīgais noteikta veida (taga) elements kādā konteinerā

: n-bērns (n): apzīmē bērna elementu, kuram ir noteikts skaitlis n, piemēram, otro bērnu

: n-pēdējais bērns (n): apzīmē bērna elementu, kuram ir noteikts skaitlis n, sākot no beigām

: n-of-type (n): atlasa noteikta veida bērnu, kuram ir noteikts numurs

: n-pēdējā veida tips (n): atlasa noteikta veida bērnu, kuram ir noteikts numurs, sākot no beigām

Pirmā bērna pseidoklase

Mēs izmantojam pirmā bērna pseidoklasi, lai atlasītu pirmās saites blokos:

Tabletes

Viedtālruņi

A: pirmais bērns tiek veidots uz saites, ja tas ir jebkura elementa pirmais bērns.

Un otrajā blokā pirmais elements ir rindkopa, tāpēc neviena no saitēm nav veidota.

Pēdējā bērna pseidoklase

Mēs izmantojam pēdējā bērna pseidoklasi:

Viedtālruņi

Tabletes

Atlasītājs a: pēdējais bērns nosaka saites stilu, kas ir pēdējie bērni.

Pirmajā blokā saite ir pēdējais bērnu elements. Bet otrajā, pēdējais bērns ir rindkopa, tāpēc otrajā blokā stils netiek piemērots nevienai no saitēm.

Vienīgais bērns

Atlasītājs: tikai bērns atlasa elementus, kas ir vienīgie bērni konteineros:

Virsraksts

Rindkopas ar tekstiem "Text1" un "Text4" ir vienīgie bērni ārējos konteineros, tāpēc tie ir veidoti ar sarkanu fonta krāsu.

Vienīgā tipa pseidoklase

Vienīgā tipa pseidoklase izvēlas elementu, kas ir vienīgais konkrētā tipa elements konteinerā. Piemēram, viens div elements, bet tajā pašā konteinerā var būt tik daudz citu veidu elementu.

Viena rindkopa un laiduma elements

Lai gan div elementiem ir noteikts stils, tas netiks piemērots, jo ķermeņa konteinerā ir divi div, nevis viens. Bet ķermenī ir tikai viens p elements, tāpēc tas tiks veidots. Un arī p konteinerā ir tikai viens laiduma elements, tāpēc arī tas tiks veidots.

N-tā bērna pseidoklase

N-tā bērna pseidoklase ļauj veidot katru otro, trešo elementu, tikai pāra vai tikai nepāra elementus utt.

Piemēram, veidosim pāra un nepāra tabulas rindas:

Viedtālruņi

Samsung	Galaxy S7 Edge	60000
Apple	iPhone SE	39000
Microsoft	Lumia 650	13500
Alcatel	Elks S4	30000
Huawei	P9	60000
HTC	HTC 10	50000
Meizu	Pro 6	40000
Xiaomi	Mi5	35000

Lai definētu nepāra elementu stilu, vērtība "nepāra" tiek nodota atlasītājam:

Tr: n -tais bērns (nepāra) ()

Lai veidotu pāra elementus, vērtība “even” tiek pārsūtīta atlasītājam:

Tr: n -tais bērns (pat) ()

Šim atlasītājam varam nodot arī ieveidojamā elementa numuru:

Tr: n-bērns (3) (fona krāsa: #bbb;)

Šajā gadījumā tiek veidota trešā līnija.

Vēl viena iespēja ir skaitlim izmantot vietturi, kas izteikts ar burtu n:

Tr: n -tais bērns (2n + 1) (fona krāsa: #bbb;)

Šeit stils tiek piemērots katrai otrajai nepāra līnijai.

Skaitlis pirms n (šajā gadījumā 2) apzīmē nākamo izceļamo bērnu. Skaitlis, kas seko plus zīmei, norāda, no kura elementa sākt atlasi, tas ir, +1 nozīmē sākt no pirmā pakārtotā elementa.

Tādējādi šajā gadījumā atlase sākas no 1. elementa, un nākamais ir 2 * 1 + 1 = 3. elements, pēc tam 2 * 2 + 1 = 5. elements utt.

Piemēram, ja mēs vēlamies atlasīt katru trešo elementu, sākot no otrā, tad mēs varētu rakstīt:

Tr: n -tais bērns (3n + 2) (fona krāsa: #bbb;)

N-pēdējā-bērna pseidoklase būtībā nodrošina to pašu funkcionalitāti, izņemot to, ka elementi netiek skaitīti no sākuma, bet gan no beigām:

Tr: n-pēdējais bērns (2) (fona krāsa: #bbb; / * 2 rinda no gala, tas ir, priekšpēdējā * /) tr: n-pēdējā-bērns (2n + 1) (fona krāsa : #eee; / * nepāra rindas, sākot no beigām * /)

N-tā veida pseidoklase

N-tā veida pseidoklase ļauj atlasīt noteikta veida bērnu ar noteiktu numuru:

Tr: n-tā tipa (2) (fona krāsa: #bbb;)

N-pēdējā veida pseidoklase darbojas līdzīgi, tikai tagad elementi tiek skaitīti no beigām:

Tr: n-pēdējā veida tips (2n) (fona krāsa: #bbb;)

Es domāju, ka par to zina daudzi cilvēki konteksta atlasītāji CSS... Tie tiek izmantoti visbiežāk, tomēr pieredzējuši maketu dizaineri labi zina, ka dažreiz kontekstuālie atlasītāji rada noteiktas problēmas. Šī problēma ir saistīta ar faktu, ka elementa struktūrā var būt daudz identisku elementu, kas ir ligzdoti viens otrā. Stils jāpiemēro ne visiem ligzdotajiem elementiem, bet tikai tieši bērna elementam. To viņi šim nolūkam izmanto. bērnu atlasītāji CSS.

Lai padarītu problēmu skaidrāku, sniegsim jums nelielu piemēru. Lai mums ir tādi HTML kods:

Un mūsu uzdevums ir padarīt tikai sarkanu " Otrā rindkopa". Ja mēs rakstām, izmantojot konteksta atlasītāju:

Konteiners p (
krāsa: sarkana;
}

Tad abas rindkopas kļūs sarkanas, kas mums nemaz nav vajadzīgas. Šo uzdevumu ir ļoti viegli atrisināt, izmantojot bērnu atlasītāji CSS:

Konteiners> p (
krāsa: sarkana;
}

Tas ir viss, tagad tikai mēs esam kļuvuši sarkani " Otrā rindkopa Tā kā šis konkrētais punkts ir tieši bērns .konteiners... BET " Pirmā rindkopa"ir iekšējā bērns div tādējādi tas neietilpst bērnu atlasītāja ietekmē.

Šādi uzdevumi tiek viegli atrisināti, tomēr ir viens milzīgs trūkums. bērnu atlasītāji CSS- tie nedarbojas pārlūkprogrammās Internet Explorer... Šī iemesla dēļ to lietošana ir ļoti nevēlama. Bet, ja jūs pēkšņi kaut kur nonākat, tad tagad jūs zināt, ko nozīmē šāda veida selektors un ko tas dara.

Šī atlasītāja galvenais mērķis izriet no tā nosaukuma un ir atsauce uz bērnu elementu. Tas tiek parādīts, izmantojot vienkāršo zīmi ">", kas saista bērnu elementu ar vecāka elementu. Ir arī vērts atzīmēt, ka zvanā tiek izmantoti vienkārši selektori. Apsveriet šādu piemēru kā piemēru:

Elements> ul (polsterējums - augšdaļa: 20 pikseļi;)

Šis kodējums nozīmē, ka saraksts, kas ir ligzdots elementā, tiks top 20 pikseļu attālumā no augšas. Ikonas ">" klātbūtne šajā ierakstā norāda, ka kārtula tiks piemērota tikai pirmā ligzdošanas līmeņa sarakstiem.

Detalizēta bērna selektora darbības analīze

Bērna elementu atlasītājam ir līdzīgas īpašības kā bērna atlasītājam. Tomēr ir raksturīga iezīme, kas parāda šo operāciju būtisko atšķirību. Tas slēpjas faktā, ka bērnu atlasītāja ietekme attiecas uz pilnīgi visiem elementiem, savukārt bērnu selektors pakļauj klasifikāciju pirmā līmeņa pozīciju stilus.

Šis piemērs palīdzēs jums skaidrāk novērtēt bērnu selektora operatora darbību:

Div> p (krāsa: # ff0000; / * sarkana * /)

< div>Pēc noklusējuma šai rindai būs melns teksts.< span>Šī līnija kļūst sarkana, jo p ir div taga pakārtotā atzīme. < p>Atkal mēs redzam melnus burtus.< span>Šeit mēs redzam arī melnas rakstzīmes, jo šajā posmā vecāks ir p tags.

Šis piemērs apstiprina bērnu selektora operatora darbību atbilstoši ligzdošanas līmenim.

Bērnu atlasītāja operatora lietošanas ierobežojums

Jāatzīmē, ka šo darbību atbalsta visas pārlūkprogrammas, izņemot leģendāro Internet Explorer 6. Es domāju, ka ļoti maz cilvēku izmanto šo pārlūkprogrammu, bet, ja ir unikāli, tad viņiem ir izeja, kas tiks aprakstīta atsevišķs raksts.

Kāpēc tas tiek izmantots

Programmētāji atsaucas uz bērnu elementu atlasītājiem, kad tiem ir jāpiešķir savs unikālais stils ligzdotajiem elementiem. Arī šī atlasītāja izmantošana var samazināt CSS daudzumu, kas palielinās dokumenta lasāmību. Kā rāda prakse, uz šo darbību visbiežāk atsaucas, veidojot nolaižamās izvēlnes.

Arī bērnu elementu atlasītāju izmanto, lai piešķirtu unikālus stilus elementiem, kuru vecāki jau ir zināmi agrāk. Citiem vārdiem sakot:

Galvenā> header ( / * stils attiecas tikai uz galveno galveni * / }

Šis piemērs ir taisnība gadījumos, kad galvenes tagu izmanto, lai izceltu rakstu virsrakstus. Mūsu gadījumā mēs iestatījām dizainu tikai galvenajai galvenei un neietekmējam sekundāro. Šis paņēmiens arī ļauj izvairīties no nevajadzīgas identifikatoru izmantošanas, kas savukārt padara CSS failu vieglāku un lasāmāku.

Summējot

Tādējādi bērna elementa operatoru var izmantot ne tikai nolaižamo izvēlņu noformēšanai, bet arī nedaudz optimizēt jūsu interneta resursu meklēšanas robotu darbam.