CSS :nth-child() -seudolaji
- 上一页 :not()
- Seuraava sivu :nth-last-child()
- Palaa ylös CSS tekoälyviittausopas
Määrittely ja käyttö
CSS :nth-child(n)}}
tekoiluista valitaan sen vanhemman elementin lapsen listaan kuuluvat elementit. n lapsen
Tämä tekoilu määrittää elementin sen vanhemman elementin lapsen listan indeksin perusteella.
n voi olla luku/index, avainsana (parillinen
tai yhtenäinen
) tai kaava (esim. an + b)
Vinkki:Katso :nth-of-type()
tekoiluista valitaan sen vanhemman elementin lapsen listaan kuuluvat elementit.samanlaiset (nimike)n n lapsen elementtiä.
Esimerkki
Esimerkki 1
Kuinka käyttää :nth-child()
Tekoilu:
/* Valitaan kaikista veljeksistä neljännessä elementissä oleva elementti */ :nth-child(4) { background-color: keltainen; } /* Valitaan div-sivutilan toinen elementti */ div:nth-child(2) { background-color: punainen; } /* Valitaan listan toinen li-elementti */ li:nth-child(2) { background-color: vaaleansininen; }
Esimerkki 2
parillinen
ja yhtenäinen
On avainsana, jota voidaan käyttää yhdistämään parillisten tai epäparillisten indeksien lapsen elementit (ensimmäisen lapsen indeksi on 1).
Tässä me määrittelemme eri taustavärin parillisten ja epäparillisten <p>-elementtien:
p:nth-child(parillinen) { background-color: punainen; } p:nth-child(yhtenäinen) { background: vaaleansininen; }
Esimerkki 3
Käytä kaavaa (an + b) Kuvaus:a Edustaa kokonaislukujen askelta, n on kaikki nollasta lähtien olevat ei-negatiiviset kokonaisluvut,b On kokonaisluku etäisyys.
Tässä me määrittelemme taustavärin kaikille <p>-elementeille, joiden indeksi on kolmen kerran jakaja (valitaan kolmas, kuudes, yhdeksäs jne. elementti):
p:nth-child(3n+1) { background-color: punainen; }
Esimerkki 4
Tässä me määrittelemme taustavärin kaikille <p>-elementeille, joiden indeksi on kolmen kerran jakaja. sitten vähennämme 1 (valitaan ensimmäinen, neljäs, seitsemäs jne. elementti):
p:nth-child(3n-1) { background-color: punainen; }
CSS-grammatiikka
:nth-child(indeksi | parillinen | yhtenäinen | an+b) { css-deklaratiot; }
Tekninen tarkistus
Versio: | CSS3 |
---|
Selaimen tuki
Taulukossa olevat numerot määrittelevät ensimmäisen selaimen version, joka täysin tukee tätä tekoiluista.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
- 上一页 :not()
- Seuraava sivu :nth-last-child()
- Palaa ylös CSS tekoälyviittausopas