: n-tasis tipas CSS-gudrybės

Anonim

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

Tarkime, kad mes turime neužsakytą sąrašą ir norime „zebra-dryžuoti“ kintančius sąrašo elementus:



    

  • First Item
    • 

  • Second Item
    • 

  • Third Item
    • 

  • Fourth Item
    • 

  • Fifth Item
    •

Užuot pridėję klases prie kiekvieno sąrašo elemento (pvz., .even& .odd), Galime naudoti :nth-of-type:

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

Kaip matote, :nth-of-typepateikia argumentą: tai gali būti vienas sveikas skaičius, raktiniai žodžiai „lyginis“ arba „nelyginis“ arba formulė, kaip parodyta aukščiau. 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ą masyvo elementuose „JavaScript“. Raktiniai žodžiai „lyginis“ ir „nelyginis“ yra nesudėtingi, tačiau formulė sudaroma 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-of-typeselektorių pavyzdžių :

Patikrinkite šį rašiklį!

Laimei, jūs ne visada turite patys atlikti matematiką - yra keli :nth-of-typebandytojai ir generatoriai:

  • CSS-gudrybių bandytojas
  • Lea Verou testuotojas

Lankytinos vietos

  • :nth-of-typekartojasi per elementus, pradedant nuo šaltinio tvarkos viršaus. Vienintelis skirtumas tarp jo ir :nth-last-of-typetas, kad pastarasis kartojasi per elementus, pradedant nuo šaltinio tvarkos apačios.
  • :nth-of-typeSelektorius yra labai panašus į :nth-childbet viena kritinis skirtumas: tai yra daugiau konkretus. Aukščiau pateiktame pavyzdyje jie gautų tą patį rezultatą, nes kartojame tik lielementus, 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 :nth-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-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.