: n-tā veida - CSS-triki

:nth-of-typeSelektors ļ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.

Pieņemsim, ka mums ir nesakārtots saraksts un mēs vēlamies “zebras joslas” mainīt saraksta elementus:

First Item
Second Item
Third Item
Fourth Item
Fifth Item

Tā vietā, lai pievienotu klases katram saraksta vienumam (piemēram, .even& .odd), mēs varam izmantot :nth-of-type:

li ( background: slategrey; ) /* select alternating items starting with the second item */ li:nth-of-type(2n) ( background: lightslategrey; )

Kā redzat, :nth-of-typeņem argumentu: tas var būt viens vesels skaitlis, atslēgvārdi “pāra” vai “nepāra” vai formula, kā parādīts iepriekš. Ja ir norādīts vesels skaitlis, tiek atlasīts tikai viens elements, bet atslēgvārdi vai formula atkārtosies visos vecāka elementa pakārtotajos elementos un atlasīs atbilstošus elementus, kas līdzīgi navigācijai matricas elementos JavaScript. Atslēgvārdi “pāra” un “nepāra” ir vienkārši, bet 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-of-typeatlasītāju piemēri :

Pārbaudiet šo pildspalvu!

Par laimi, jums ne vienmēr ir jāveic matemātika pašiem - tur ir vairāki :nth-of-typetestētāji un ģeneratori:

• CSS-triku testeris
• Lea Verou testētājs

Apskates vietas

• :nth-of-typeatkārtojas caur elementiem, sākot no avota secības augšdaļas. Vienīgā atšķirība starp to un :nth-last-of-typeto, ka pēdējais atkārtojas caur elementiem, sākot no avota secības apakšas.
• :nth-of-typeSelektors ir ļoti līdzīgs :nth-child, bet ar vienu būtisku atšķirību: tas ir konkrētāks. Iepriekš minētajā piemērā viņiem būtu tāds pats rezultāts, jo mēs atkārtojam tikai lielementus, bet, ja mēs atkārtotu sarežģītāku brāļu un māsu grupu, mēs :nth-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 - :nth-of-typetā ir vērsta uz noteiktu elementa veidu vienošanās ietvaros attiecībā uz līdzīgiem brāļiem un māsām, nevis visiem brāļiem un māsām.

Pārlūka atbalsts

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Darbi	3.2+	Darbi	9,5+	9+	Darbi	Darbi

:nth-of-typetika 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.