Beispiel
Wählen Sie jedes <p> -Element , das die dritte ist <p> Element seiner Eltern:
$("p:nth-of-type(3)") Versuch es selber " Definition und Verwendung
Die :nth-of-type( n ) - n th :nth-of-type( n ) Selektor wählt alle Elemente, die der sind n th - n th Kind, einer bestimmten Art, ihrer Eltern.
Tipp: Verwenden Sie das :nth-child() Selektor alle Elemente auswählen, die das sind n th - n th Kind, unabhängig von der Art, ihrer Eltern.
Syntax
:nth-of-type( 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 gerade untergeordnetes Element |
| odd | Wählt jedes ungerade Kind-Element |
| formula | Gibt an, welche Kind - Element (e) mit einer Formel ausgewählt werden ( an + b ) . Beispiel: p:nth-of-type(3n+2) - p:nth-of-type(3n+2) wählt jeden Absatz 3, auf dem 2. Absatz beginnen |
Probieren Sie es selbst - Beispiel
Wählen Sie die einzelnen <p> <p> Element, das die zweite ist <div> <p> Element aller <div> Elemente
Wie jedes auszuwählen <p> Element , das die zweite <p> Element aller <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-last-type() :nth-of-type() und :nth-of-last-type() - :nth-of-last-type()
Der Unterschied zwischen p:nth-child(2), p:nth-last-child(2), p:nth-of-type(2) und p:nth-of-last-type(2) .