:nth-last-of-typeSelektorius 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-of-typetik tuo atveju, kai pasirenkami elementai pradedami šaltinio eilės apačioje, o ne viršuje.
Tarkime, kad mes turime neužsakytą sąrašą ir norime pabrėžti antrą-paskutinį elementą (šiame tiksliajame 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-of-type:
li ( background: slategrey; ) /* select the second-last item */ li:nth-last-of-type(2) ( background: lightslategrey; )Kaip matote, :nth-last-of-typepateikia 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šiai kaip naršant masyvo elementus „JavaScript“. Raktiniai žodžiai „lyginis“ ir „nelyginis“ yra nesudėtingi (atitinkamai 2, 4, 6 ir tt arba 1, 3, 5 ir tt). 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ų :
Žr. Pen CSS-Tricks:: n-asis paskutinis tipo Chrisas Coyieris (@chriscoyier) „CodePen“.
Laimei, jūs ne visada turite patys atlikti matematiką - yra keli :nth-last-of-typebandytojai ir generatoriai:
- CSS-gudrybių bandytojas
- Lea Verou testuotojas
Lankytinos vietos
:nth-last-of-typekartojasi per elementus, pradedant nuo šaltinio tvarkos apačios. Vienintelis skirtumas tarp jo ir:nth-of-typetas, kad pastarasis kartojasi per elementus, pradedant nuo šaltinio tvarkos apačios.:nth-last-of-typeSelektorius yra labai panašus į:nth-last-childbet viena kritinis skirtumas: tai yra daugiau 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:nth-last-of-typetam tikro tipo elemento galią susitarime su panašiais broliais ir seserimis, ne su visais.
Naršyklės palaikymas
| „Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| Veikia | 3.2+ | Veikia | 9,5+ | 9+ | Veikia | Veikia |
:nth-last-of-typebuvo 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.