Beispiel
Wählen Sie jedes <p> Element , das das dritte Kind seiner Eltern ist:
$("p:nth-child(3)") Versuch es selber " Definition und Verwendung
Die :nth-child( n ) - nth :nth-child( n ) Selektor wählt alle Elemente, die der sind nth - nth Kind, unabhängig vom Typ ihrer Eltern.
Tipp: Verwenden Sie den :nth-of-type() - n th :nth-of-type() Selektor alle Elemente auswählen, die das sind n th - n th Kind, einer bestimmten Art, ihrer Eltern.
Syntax
:nth-child( n |even|odd| formula )| Parameter | Beschreibung |
|---|---|
| n | Der Index eines jeden Kindes anzupassen. Muss eine Nummer sein. Das erste Element hat die Indexnummer 1. |
| even | Wählt jedes even untergeordnetes Element |
| odd | Wählt jedes odd Kind - Element |
| formula | Gibt an, welche Kind - Element (e) mit einer Formel ausgewählt werden ( an + b ) . Beispiel: p:nth-child(3n+2) wählt jeden dritten Absatz, am 2. Kind ab Element |
Probieren Sie es selbst - Beispiel
Wählen Sie jedes <div> <p> Element , das das zweite Kind von allen ist <div> Elemente
Wie jedes auszuwählen <p> Element , das das zweite Kind von allen ist <div> Elemente.
Mit Hilfe einer Formel (an + b)
Wie eine Formel zu verwenden ( an + b ) zu verschiedenen untergeordneten Elemente auszuwählen.
Mit "even" und "odd"
Wie gerade und ungerade zu verwenden, um verschiedene Kind-Elemente auswählen.
Der Unterschied zwischen : nth-child () , :nth-last-child() , :nth-of-type() - :nth-of-type() und: n - te-of-last-Typ ()
Der Unterschied zwischen p:nth-child(2), p:nth-last-child(2), p:nth-of-type(2) und p:nth-of-last-type(2) .