CSS :nth-of-type() 伪类

定义和用法

CSS :nth-of-type(n) tillsammans med typen (etikett) av sitt föräldrelement. n en underelements element. Pseudoklasser används för att matcha som är den

n kan vara ett nummer/index, ett nyckelord (udda eller jämna) eller en formel (som an + b)

Tips:Se :nth-child() pseudoklasser för att välja som är den n en underelements element, oavsett typ.

Exempel

Exempel 1

Hur man använder :nth-of-type() Väljare:

/* Välj den andra elementet i bröderna div-element */
div:nth-of-type(2) {
  background: red;
}
/* Välj den andra li-elementet i listan */
li:nth-of-type(2) {
  background: ljusgrön;
}
/* Välj varje tredje element i någon bröderna elementgrupp */
:nth-of-type(3) {
  background: yellow;
}

Prova själv

Exempel 2

udda och jämna är en nyckelord som kan användas för att matcha element med udda eller jämna index (det första elementets index är 1).

Här specificerar vi olika bakgrundsfärger för <p> element med udda och jämna index:

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

Prova själv

Exempel 3

Använd formeln (an + b) Beskrivning:a betyder ett heltalsskrid, n är alla icke-negativa heltal som börjar från 0,b är ett heltalsavstånd.

Här specificerar vi bakgrundsfärg för alla <p> element med index som är multipel av 3 (valt tredje, sjätte, nionde osv. element):

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

Prova själv

Exempel 4

Här specificerar vi bakgrundsfärg för alla <p> element med index som är multipel av 3. Sedan subtraherar vi 1 (valt andra, femte, åttionde osv. element):

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

Prova själv

CSS syntax

:nth-of-type(index | udda | jämna | an+b) {
  css deklarationer;
}

Tekniska detaljer

Webbläsarstöd

Tal i tabellen specificerar den första webbläsarversionen som fullständigt stöder pseudoklassen.