:nth-last-childSelektorius leidžia jums pasirinkti vieną ar daugiau elementų, atsižvelgiant į jų šaltinį, kad, atsižvelgiant į formulę. CSS selektorių 3 lygio specifikacijoje jis apibrėžiamas kaip „struktūrinė pseudoklasė“, o tai reiškia, kad jis naudojamas kuriant turinį, atsižvelgiant į jo santykius su tėvų ir brolių elementais. Jis veikia taip pat, kaip :nth-childtik tuo atveju, kai pasirenkami elementai pradedami šaltinio eilės apačioje, o ne viršuje.
Tarkime, kad turime sąrašą su nežinomu daiktų skaičiumi ir norime paryškinti antrą-paskutinį elementą (šiame pavyzdyje „Ketvirtasis elementas“):
- First Item
- Second Item
- Third Item
- Fourth Item
- Fifth Item
Užuot atlikę kažką panašaus į klasės elemento įtraukimą į sąrašo elementą (pvz. .highlight), Galime naudoti :nth-last-child:
li ( background: slategrey; ) /* select the second-last item */ li:nth-last-child(2) ( background: lightslategrey; )Kaip matote, :nth-last-childpateikia argumentą: tai gali būti vienas sveikas skaičius, raktiniai žodžiai „lyginis“ arba „nelyginis“ arba formulė. Jei nurodomas sveikasis skaičius, pasirenkamas tik vienas elementas, tačiau raktiniai žodžiai ar 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 paprasti (atitinkamai 2, 4, 6 ir 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ą antrą elementą pagal formulę 2n, kuri veikė, nes kiekvieną kartą, kai elementas buvo tikrinamas, „n“ padidėjo vienu (2 × 0, 2 × 1, 2 × 2, 2 × 3 ir kt.). Jei elemento tvarka atitinka lygties rezultatą, jis pasirenkamas (2, 4, 6 ir kt.). Norėdami išsamiau paaiškinti matematiką, perskaitykite šį straipsnį.
Norėdami iliustruoti toliau, pateikiame keletą galiojančių :nth-last-of-typeselektorių pavyzdžių :
Laimei, jūs ne visada turite patys atlikti matematiką - yra keli :nth-last-childbandytojai ir generatoriai:
- CSS-gudrybių bandytojas
- Lea Verou testuotojas
Lankytinos vietos
:nth-last-childkartojasi per elementus, pradedant nuo šaltinio tvarkos apačios. Vienintelis skirtumas tarp jo ir:nth-childtas, kad pastarasis kartojasi per elementus, pradedant nuo šaltinio tvarkos viršaus.:nth-last-childSelektorius yra labai panašus į:nth-last-of-typebet viena kritinis skirtumas: tai yra mažiau konkretus. Aukščiau pateiktame pavyzdyje jie gautų tą patį rezultatą, nes kartojame tiklielementus, bet jei kartotume sudėtingesnę brolių ir seserų grupę,:nth-last-childbandytume suderinti visus brolius ir seseris, ne tik su to paties elemento broliais ir seserimis. Tai atskleidžia galybę:nth-last-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“ |
|---|---|---|---|---|---|---|
| Veikia | 3.2+ | Veikia | 9,5+ | 9+ | Veikia | Veikia |
:nth-last-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.