CSS :nth-of-type() 伪类

定义和用法

CSS :nth-of-type(n) Teeskäisytyyppi valitsee sen vanhemman elementin n jokainen lapsen lapsi elementti.

n voi olla luku/index, avainsana (epäröi tai parillinen) tai kaava (esim. an + b)

Vinkki:Katso :nth-child() Teeskäisytyyppi valitsee sen vanhemman elementin n elementin lapsen elementti, riippumatta sen tyylistä.

Esimerkki

Esimerkki 1

Kuinka käyttää :nth-of-type() Valitsin:

/* Valitse div-sivuseuraajien toinen elementti */
div:nth-of-type(2) {
  background: red;
}
/* Valitse listan toinen li-elementti */
li:nth-of-type(2) {
  background: vihreä;
}
/* Valitse jokainen kolmas elementti kaksosryhmästä */
:nth-of-type(3) {
  background: keltainen;
}

Kokeile itse

Esimerkki 2

epäröi ja parillinen On avainsana, jota voidaan käyttää vastaamaan parittomia tai parillisia indeksejä ( ensimmäisen lapsen indeksi on 1).

Tässä me määrittelemme eri taustavärin parittomille ja parillisille <p> -elementeille:

p:nth-of-type(odd) {
  background: red;
}
p:nth-of-type(parillinen) {
  background: blue;
}

Kokeile itse

Esimerkki 3

Käytä kaavaa (an + b) Kuvaus:a Tarkoittaa kokonaislukuvaihetta, n on kaikki alkuperäiset kokonaisluvut alkuperäisestä 0:b On kokonaislukuvaihe

Tässä me määrittelemme taustavärin kaikille <p> -elementille, joiden indeksi on kolmion kerta (valitaan kolmas, kuudes, yhdeksäs jne. elementti):

p:nth-of-type(3n+0) {
  background: red;
}

Kokeile itse

Esimerkki 4

Tässä me määrittelemme taustavärin kaikille <p> -elementille, joiden indeksi on kolmion kerta. Sitten vähennämme 1 (valitaan toinen, viides, kahdeksas jne. elementti):

p:nth-of-type(3n-1) {
  background: red;
}

Kokeile itse

CSS syntaksi

:nth-of-type(indeksi | epäröi | parillinen | an+b) {
  css lausunnot;
}

Tekninen yksityiskohta

Selaimen tuki

Taulukossa olevat numerot määrittelevät ensimmäisen selaimen version, joka täysin tukee tätä teeskäisyluokkaa.