CSS :nth-child() 伪类

定义和用法

CSS :nth-child(n)}} pseudo-klasser bruges til at matche som sin forældreelements n underelementer

denne pseudo-klasser matcher elementer baseret på deres indeks i deres forældres elementliste.

n kan være et tal/index, et nøgleord (odd eller even) eller en formel (som an + b)

Vedviser:Se :nth-of-type() pseudo-klasser bruges til at vælge som sin forældreelementsmed samme type (etiketnavn)s n en underelementer af elementet.

Eksempel

Eksempel 1

Hvordan bruges :nth-child() Pseudo-klasser:

/* Vælg enhver fjerde element i enhver brødrekke */
:nth-child(4) {
  baggrundsfarve: guld;
}
/* Vælg den anden element i div-søskendebroderne */
div:nth-child(2) {
  baggrundsfarve: rød;
}
/* Vælg den anden li-element i listen */
li:nth-child(2) {
  baggrundsfarve: lysgrøn;
}

Prøv det selv

Eksempel 2

odd og even er en nøgleord, der kan bruges til at matche elementer med odd eller even indeks (indekset for det første barn er 1).

Her angiver vi forskellige baggrundsfarver for <p>-elementer med odd og even indeks:

p:nth-child(odd) {
  baggrundsfarve: rød;
}
p:nth-child(even) {
  baggrund: lysgrøn;
}

Prøv det selv

Eksempel 3

brug formelen (an + b) Beskrivelse:a betyder en heltalsstige, n er alle ikke-negative heltal, der starter fra 0,b er en heltalsafstand.

Her angiver vi baggrundsfarve for alle <p>-elementer med indeks som er multiplum af 3 (valget vil være tredje, sjette, niende osv.):

p:nth-child(3n+1) {
  baggrundsfarve: rød;
}

Prøv det selv

Eksempel 4

Her angiver vi baggrundsfarve for alle <p>-elementer med indeks som er multiplum af 3. Derefter trækker vi 1 fra (valget vil være det første, fjerde, syvende osv.):

p:nth-child(3n-1) {
  baggrundsfarve: rød;
}

Prøv det selv

CSS-syntaks

:nth-child(index | odd | even | an+b) {
  css-udtryk;
}

Tekniske detaljer

Browser-understøttelse

Tallene i tabellen angiver den første browser-version, der fuldt ud understøtter denne pseudo-klasser.