CSS :nth-of-type() Kieser
Voorbeeld
Spesifiseer 'n agtergrondkleur vir elke <p>-element wat die tweede p-element van sy ouer is:
p:nth-of-type(2)
{
background: red;
}
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die kieser pas by elke element wat die n de kind, van 'n spesifieke tipe, van sy ouer is.:nth-of-type(n)
n kan 'n getal, 'n sleutelwoord of 'n formule wees.
Wenk: Kyk na die :nth-child()- kieser om die element te kies wat die n de kind is, ongeag die tipe , van sy ouer.
Weergawe: | CSS3 |
---|
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die kieser ten volle ondersteun.
Selector | |||||
---|---|---|---|---|---|
:nth-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
CSS-sintaksis
:nth-of-type(number) {
css declarations;
}
Meer voorbeelde
Voorbeeld
Onewe en ewe is sleutelwoorde wat gebruik kan word om kinderelemente te pas waarvan die indeks onewe of ewe is (die indeks van die eerste kind is 1).
Hier spesifiseer ons twee verskillende agtergrondkleure vir onewe en ewe p elemente:
p:nth-of-type(odd)
{
background: red;
}
p:nth-of-type(even)
{
background: blue;
}
Voorbeeld
Gebruik 'n formule ( an + b ). Beskrywing: a verteenwoordig 'n siklusgrootte, n is 'n teller (begin by 0), en b is 'n offsetwaarde.
Hier spesifiseer ons 'n agtergrondkleur vir alle p-elemente waarvan die indeks 'n veelvoud van 3 is:
p:nth-of-type(3n+0)
{
background: red;
}