:nth-childSelektorius leidžia pasirinkti vieną ar kelis elementus, remiantis jų kodo tam, atsižvelgiant į formulę.
/* Select the first list item */ li:nth-child(1) ( ) /* Select the 5th list item */ li:nth-child(5) ( ) /* Select every other list item starting with first */ li:nth-child(odd) ( ) /* Select every 3rd list item starting with first */ li:nth-child(3n - 2) ( ) /* Select every 3rd list item starting with 2nd */ li:nth-child(3n - 1) ( ) /* Select every 3rd child item, as long as it has class "el" */ .el:nth-child(3n) ( )CSS selektorių 3 lygio specifikacijoje jis apibrėžiamas kaip „struktūrinė pseudoklasė“, tai reiškia, kad jis naudojamas kuriant turinį, atsižvelgiant į jo santykį su tėvų ir brolių elementais.
Tarkime, kad mes kuriame CSS tinklelį ir norime pašalinti kiekvieno ketvirto tinklo modulio paraštę. Štai tas HTML:
One Two Three Four Five Užuot pridėję klasę prie kiekvieno ketvirto elemento (pvz. .last), Galime naudoti :nth-child:
.module:nth-child(4n) ( margin-right: 0; ):nth-childSelektorius sustabdo argumentas: tai gali būti vienas sveikasis skaičius, raktiniai žodžiai even, odd, arba formulė. Jei nurodomas sveikasis skaičius, pasirenkamas tik vienas elementas, tačiau raktiniai žodžiai arba formulė kartojasi per visus pirminio elemento antrinius elementus ir parenka atitinkančius elementus, panašius į naršymą „JavaScript“ masyvo elementuose. Raktiniai žodžiai „lyginis“ ir „nelyginis“ yra nesudėtingi (atitinkamai 2, 4, 6 ir kt. Arba 1, 3, 5). Formulė sukurta naudojant sintaksę an+b, kur:
- „A“ yra sveiko skaičiaus reikšmė
- „N“ yra pažodinė raidė „n“
- „+“ Yra operatorius ir gali būti „+“ arba „-“
- „B“ yra sveikasis skaičius ir reikalingas, jei į formulę įtraukiamas operatorius
Svarbu pažymėti, kad ši formulė yra lygtis ir kartojasi per kiekvieną brolio ar brolio elementą, nustatant, kuris bus pasirinktas. Formulės „n“ dalis, jei ji įtraukta, reiškia didėjančių teigiamų sveikųjų skaičių rinkinį (kaip ir iteracija per masyvą). Aukščiau pateiktame pavyzdyje mes pasirinkome kiekvieną ketvirtą elementą pagal formulę 4n, kuri veikė, nes kiekvieną kartą, kai elementas buvo tikrinamas, „n“ padidėjo vienu (4 × 0, 4 × 1, 4 × 2, 4 × 3 ir kt.). Jei elemento eiliškumas sutampa su lygties rezultatu, jis pasirenkamas (4, 8, 12 ir kt.). Norėdami išsamiau paaiškinti matematiką, perskaitykite šį straipsnį.
Norėdami iliustruoti toliau, pateikiame keletą galiojančių :nth-childselektorių pavyzdžių :
Laimei, jūs ne visada turite patys atlikti matematiką - yra keli :nth-childbandytojai ir generatoriai:
- CSS-gudrybių bandytojas
- Lea Verou testuotojas
: n-tas vaikas (an + b)
Yra mažai žinomas filtras, kurį galima pridėti :nth-childpagal CSS selektorių specifikaciją: galimybė pasirinkti :nth-childelementų pogrupį naudojant of formatą. Tarkime, kad turite mišraus turinio sąrašą: kai kurie turi klasę .video, kiti - klasę .picture, o jūs norite pasirinkti pirmąsias 3 nuotraukas. Tai galite padaryti naudodami „of“ filtrą taip:
:nth-child(-n+3 of .picture) ( /* Selects the first 3 elements applied not to ALL children but only to those matching .picture */ )Atminkite, kad tai skiriasi nuo selektoriaus pridėjimo tiesiai prie :nth-childparinkiklio:
.picture:nth-child(-n+3) ( /* Not the same! This applies to elements matching .picture which _also_ match :nth-child(-n+3) */ )Tai gali šiek tiek supainioti, todėl pavyzdys gali padėti parodyti skirtumą:
Naršyklės „of“ filtro palaikymas yra labai ribotas: nuo šio rašymo sintaksę palaikė tik „Safari“. Norėdami patikrinti savo mėgstamos naršyklės būseną, pateikite atvirus klausimus, susijusius su :nth-child(an+b of s):
- „Firefox“: parama n -tajam vaikui („An“ + B iš „sel“)
- „Chrome“: padargas: n-tasis vaikas (S + b)
Lankytinos vietos
:nth-childkartojasi per elementus, pradedant nuo šaltinio tvarkos viršaus. Vienintelis skirtumas tarp jo ir:nth-last-childtas, kad pastarasis kartojasi per elementus, pradedant nuo šaltinio tvarkos apačios.- Pirmojo
nelementų skaičiaus pasirinkimo sintaksė yra šiek tiek priešinga intuityviai. Pradėsite nuo-nteigiamo elementų skaičiaus, kurį norite pasirinkti. Pavyzdžiui,li:nth-child(-n+3)pasirinks pirmuosius 3lielementus. :nth-childSelektorius yra labai panašus į:nth-of-typebet viena kritinis skirtumas: tai yra mažiau konkretus. Aukščiau pateiktame pavyzdyje jie gautų tą patį rezultatą, nes kartojame tik.moduleelementus, bet jei kartotume sudėtingesnę brolių ir seserų grupę,:nth-childbandytume suderinti visus brolius ir seseris, ne tik su to paties elemento broliais ir seserimis. Tai atskleidžia galybę:nth-child-jis gali pasirinkti bet kurį brolių ir seserų elementą susitarime, ne tik elementus, nurodytus prieš dvitaškį.
Naršyklės palaikymas
| „Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| Bet koks | 3.2+ | Bet koks | 9,5+ | 9+ | Bet koks | Bet koks |
:nth-childbuvo pristatytas CSS selektorių 3 modulyje, o tai reiškia, kad senos naršyklių versijos jo nepalaiko. Tačiau šiuolaikinis naršyklės palaikymas yra nepriekaištingas, o naujieji pseudo selektoriai yra plačiai naudojami gamybos aplinkose. Jei jums reikia senesnės naršyklės palaikymo, naudokite IE polifillą arba naudokite šiuos pasirinkiklius nekritiniais būdais, palaipsniui tobulindami, o tai rekomenduojama.