:nth-last-childSelektors ļauj izvēlēties vienu vai vairākus elementus, pamatojoties uz to avota, lai, saskaņā ar formulu. CSS Selectors 3. līmeņa specifikācijā tas ir definēts kā “strukturāla pseidoklase”, kas nozīmē, ka to lieto satura veidošanai, pamatojoties uz tā attiecībām ar vecāku un brāļu elementiem. Tas darbojas tāpat kā :nth-childizņemot to, ka atlasa vienumus, kas sākas avota secības apakšdaļā, nevis augšpusē.
Pieņemsim, ka mums ir saraksts ar nezināmu vienību skaitu, un mēs vēlamies izcelt otro līdz pēdējo vienumu (šajā precīzajā piemērā - “Ceturtais vienums”):
- First Item
- Second Item
- Third Item
- Fourth Item
- Fifth Item
Tā vietā, lai izdarītu kaut ko, piemēram, pievienotu klasi saraksta vienumam (piemēram, .highlightmēs varam izmantot :nth-last-child:
li ( background: slategrey; ) /* select the second-last item */ li:nth-last-child(2) ( background: lightslategrey; )Kā redzat, :nth-last-childņem argumentu: tas var būt viens vesels skaitlis, atslēgvārdi “pāra” vai “nepāra” vai formula. Ja ir norādīts vesels skaitlis, tiek atlasīts tikai viens elements, bet atslēgvārdi vai formula atkārtosies visos vecākā elementa pakārtotajos elementos un atlasīs atbilstošus elementus, kas līdzīgi navigācijai matricas vienumos JavaScript. Atslēgvārdi “pāra” un “nepāra” ir vienkārši (attiecīgi 2, 4, 6 utt. Vai 1, 3, 5). Formula tiek veidota, izmantojot sintaksi an+b, kur:
- “A” ir vesels skaitlis
- “N” ir burtisks burts “n”
- “+” Ir operators un var būt “+” vai “-”
- “B” ir vesels skaitlis un ir nepieciešams, ja formulā ir iekļauts operators
Ir svarīgi atzīmēt, ka šī formula ir vienādojums un atkārtojas caur katru brāļa vai māsas elementu, nosakot, kurš tiks izvēlēts. Formulas “n” daļa, ja tā ir iekļauta, apzīmē pieaugošu pozitīvu veselu skaitļu kopu (tāpat kā iterējot caur masīvu). Iepriekš minētajā piemērā mēs atlasījām katru otro elementu ar formulu 2n, kas darbojās, jo katru reizi, kad elements tika pārbaudīts, “n” palielinājās par vienu (2 × 0, 2 × 1, 2 × 2, 2 × 3 utt.). Ja elementa secība sakrīt ar vienādojuma rezultātu, tas tiek izvēlēts (2, 4, 6 utt.). Lai iegūtu padziļinātu skaidrojumu par iesaistīto matemātiku, lūdzu, izlasiet šo rakstu.
Lai ilustrētu tālāk, šeit ir daži derīgu :nth-last-of-typeatlasītāju piemēri :
Par laimi, jums ne vienmēr ir jāveic matemātika pašiem - tur ir vairāki :nth-last-childtestētāji un ģeneratori:
- CSS-triku testeris
- Lea Verou testētājs
Apskates vietas
:nth-last-childatkārtojas caur elementiem, sākot no avota secības apakšas. Vienīgā atšķirība starp to un:nth-childto, ka pēdējais atkārtojas, izmantojot elementus, sākot no avota secības augšdaļas.:nth-last-childSelektors ir ļoti līdzīgs:nth-last-of-type, bet ar vienu būtisku atšķirību: tas ir tik īpašs. Iepriekš minētajā piemērā viņiem būtu tāds pats rezultāts, jo mēs atkārtojam tikailielementus, bet, ja mēs atkārtotu sarežģītāku brāļu un māsu grupu, mēs:nth-last-childmēģinātu saskaņot visus brāļus un māsas, ne tikai tāda paša elementa brāļus un māsas. Tas atklāj spēku,:nth-last-childka izkārtojumā var izvēlēties jebkuru brāļa vai brāļa elementu, ne tikai tos elementus, kas norādīti pirms kols.
Pārlūka atbalsts
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Darbi | 3.2+ | Darbi | 9,5+ | 9+ | Darbi | Darbi |
:nth-last-childtika ieviests CSS selektoru 3. modulī, kas nozīmē, ka vecās pārlūkprogrammu versijas to neatbalsta. Tomēr mūsdienu pārlūka atbalsts ir nevainojams, un jaunie pseido-selektori tiek plaši izmantoti ražošanas vidēs. Ja jums ir nepieciešams vecāks pārlūka atbalsts, vai nu IE polifill, vai arī izmantojiet šos atlasītājus nekritiskos veidos, kas ir ieteicami pakāpeniski.