CSS3: nth-child () Selektor
CSS - Selektoren komplettes Referenzhandbuch
Beispiele
Geben Sie jedes Element p die Hintergrundfarbe des Elternelements des zweiten Unterelements entspricht:
p:nth-child(2)
{
background:#ff0000;
}
{
background:#ff0000;
}
Versuchen »
Definition und Verwendung
: Nth-Kind (n) Selektor Elternelement n-te Element entspricht.
nkann eine Zahl, ein Schlüsselwort oder eine Formel sein.
Tipp: Lesen Sie Selektor .Der Selektor entspricht der gleichen Art von der n-ten Geschwister Geschwister.
Browser-Unterstützung
Die Zahlen in der Tabelle stellen die erste Browser die Versionsnummer der Immobilie zu unterstützen.
选择器 | |||||
---|---|---|---|---|---|
:nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Weitere Beispiele
Beispiel 1
<P ungerade und sogar als Schlüsselwort verwendet werden, um das Unterelement anzupassen verwendet wird, dessen Index gerade oder ungerade ist (der Index des ersten Kindes ist 1). Hier geben wir zwei verschiedene Hintergrundfarben für die ungeraden und geraden p Elemente:
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
Versuchen »
Beispiel 2
Unter Verwendung der Formel (an + b) Beschreibung: Die Größe eines Vertreters eines Zyklus ist ein Zähler N (beginnend bei 0) und b ist der Versatz. Hier stellen wir alle Indizes sind ein Vielfaches von drei p-Element gibt die Hintergrundfarbe:
p:nth-child(3n+0)
{
background:#ff0000;
}
{
background:#ff0000;
}
Versuchen »