English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS Referenzhandbuch

CSS @Regel(RULES)

CSS Eigenschaftsübersicht

size-Eigenschaft3 :nth-CSS

:nth-child()Selektor+child(an1beginnt, zu sortieren, und die ausgewählten Ergebnisse sind CSS-Pseudo-Klassen:nth-child()Selektor+b) entspricht der gesammelten Menge der Elemente, die durch das Kindklammerausdruck (an1,2,3...). Beispiel:
　　　 0n+3 oder einfach 3 entspricht dem dritten Element.
　　　 1n+0 oder einfach n passen auf alle Elemente an. (Kompatibilitätsinformation: In Android-Browser 4.3 Die folgenden Versionen n und 1n passen sich in der Weise an, dass sie nicht übereinstimmen.1n und 1n+0 ist konsistent und kann nach belieben gewählt werden.)
　　　 2n+0 oder einfach 2n entspricht der Position 2、4、6、8... enthaltenen Elemente (n=0,2n+0=0, das erste Element existiert nicht, da es von1anfangen, zu sortieren). Sie können das Schlüsselwort even anstelle dieses Ausdrucks verwenden.
　　　 2n+1 passt auf die Position 1、3、5、7... an. Sie können das Schlüsselwort odd anstelle dieses Ausdrucks verwenden.
　　　 3n+4 passt auf die Position 4、7、10、13... enthaltenen Elemente.
a und b müssen Integer sein und der Index des ersten Kindelements des Elements ist 1. Dies bedeutet, dass der Pseudo-Klassenname alle Indizes im Set { an + b; n = 0, 1, 2, ...} enthält die Kindelemente. Besonders zu beachten ist, dass an vor b stehen muss und nicht als b geschrieben werden darf+in Form von an.

Vollständiges Referenzhandbuch für CSS-Selektoren

Online-Beispiel

Bestimmt die Position des von jedem p-Element übereinstimmenden Elternelements, 2 Hintergrundfarbe eines Elements:

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">　
<title>Grund教程(oldtoolbag.com)</title>　
<style>　
p:nth-child(2)
{
　background:orange;
}
</style>
</head>
<body>
<h1>Dies ist ein Titel</h1>
<p>Das ist der erste Absatz.</p>
<p>Das ist der zweite Absatz.</p>
<p>Das ist der dritte Absatz.</p>
<p>Das ist der vierte Absatz.</p>
<p><b>Achtung:</b> Internet Explorer　8　Browserk版本早于不支持 :nth-child() Selektor.</p>
</body>
</html>
Testen Sie es heraus ‹/›

Definition und Verwendung

:nth-Der child(n)-Selektor entspricht dem n-ten Kindelement des Elternelements, wobei die Elementtypen uneingeschränkt sind.

n kann eine Zahl, ein Schlüsselwort oder eine Formel sein.

Hinweis: Siehe auchSelektor. Dieser Selektor entspricht dem n-ten Element seiner Artigen Geschwister.

nth-Beispiel für child-Selektor

tr:nth-child(2n+1)
　　　 Stellt die ungeraden Zeilen der HTML-Tabelle dar.

tr:nth-child(odd)
　　　 Stellt die ungeraden Zeilen der HTML-Tabelle dar.

tr:nth-child(2n)
　　　 Stellt die geraden Zeilen der HTML-Tabelle dar.

tr:nth-child(even)
　　　 Stellt die geraden Zeilen der HTML-Tabelle dar.

span:nth-child(0n+1)
　　　 Stellt den ersten und span-artigen Kindelement dar, der mit :first übereinstimmt.-child Selektor hat die gleiche Wirkung.

span:nth-child(1)
　　　 bedeutet，dass der erste Kindknoten im Elternteil ein span-Element ist，das ausgewählt wird

span:nth-child(-n+3)
　　　 Matchen Sie die span-Elemente in den ersten drei Kindelementen.

Browserkompatibilität

Die Zahlen in der Tabelle geben die erste Browserversion an，die das Attribut unterstützt。

Selektor




:nth-child()4.09.03.53.29.6

Beispiel 1

Gerade und ungerade können als Schlüsselwörter verwendet werden, um Kinder zu matchen，deren Index gerade oder ungerade ist（der erste Kindknoten ist1) Hier legen wir für ungerade und gerade p-Elemente zwei verschiedene Hintergrundfarben fest：

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">　
<title>Grund教程(oldtoolbag.com)</title>　
<style>　
p:nth-child(odd)
{
　　　　background:#ff0000;
}
p:nth-child(even)
{
　　　　background:#0000ff;
}
</style>
</head>
<body>
<h1>Dies ist ein Titel</h1>
<p>Das ist der erste Absatz.</p>
<p>Das ist der zweite Absatz.</p>
<p>Das ist der dritte Absatz.</p>
<p>Das ist der vierte Absatz.</p>
<p><b>Achtung:</b> Internet Explorer　8　Browserk版本早于不支持 :nth-child() Selektor.</p>
</body>
</html>
Testen Sie es heraus ‹/›

Beispiel 2

Verwenden Sie das Gleichung（an+ b）.Beschreibung：a stellt eine Zyklusgröße dar，N ist ein Zähler（ab 0 beginnend），und b ist der Verschiebungsmaßstab。 Hier legen wir für alle Indizes3der Vielfache der p-Elemente legt die Hintergrundfarbe fest：

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">　
<title>Grund教程(oldtoolbag.com)</title>　
<style>　
p:nth-child(3n+0)
{
　　　　background:orange;
}
</style>
</head>
<body>
<h1>Dies ist ein Titel</h1>
<p>Der erste Absatz.</p>
<p>Der zweite Absatz.</p>
<p>Der dritte Absatz.</p>
<p>Der vierte Absatz.</p>
<p>Der fünfte Absatz.</p>
<p>Der sechste Absatz.</p>
<p>Der siebte Absatz.</p>
<p>Der achte Absatz.</p>
<p>Der neunte Absatz.</p>
<p><b>Achtung:</b> Internet Explorer　8　Browserk版本早于不支持 :nth-child() Selektor.</p>
</body>
</html>
Testen Sie es heraus ‹/›

Vollständiges Referenzhandbuch für CSS-Selektoren

CSS-Funktionen (Functions)CSS-Selektordatenbank