English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Vollständiges Referenzhandbuch für CSS-Selektoren
Specify each p element matches the nth in the same type of2Background color of同级兄弟elements：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>
<style>
/* Odd sections */
p:nth-of-type(2n+1) {
color: red;
}
/* Even sections */
p:nth-of-type(2n) {
color: blue;
}
/* First section */
p:nth-of-type(1) {
font-weight: bold;
}
/* Second section */
p:nth-of-type(2)
{
background:#ff0000;
}
</style>
</head>
<body>
<div>
<div>This section does not participate in counting.</div>
<p>Das ist der erste Absatz.</p>
<p>Das ist der zweite Absatz.</p>
<div>This section does not participate in counting.</div>
<p>Das ist der dritte Absatz.</p>
<p>Das ist der vierte Absatz.</p>
</div>
</body>
</html>Testen Sie es heraus ‹/›:nth-of-type( <nth> ) where <nth> = <an-plus-b> | even | odd
:nth-of-type(n) Selektor matcht den n-ten gleichartigen Brüderknoten im selben Typ.
n kann eine Zahl, ein Schlüsselwort oder eine Formel sein.
Hinweis: Siehe auch :nth-child() Selektor. Dieser Selektor matcht den n-ten Kindknoten im Elternteil. Sehen Sie sich an :nth-child() .
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Attribut unterstützt.
| Selektor | |||||
|---|---|---|---|---|---|
| :nth-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Ungerechte und gerade können als Schlüsselwörter verwendet werden, um die nachfolgenden Elemente zu matchen, deren Index ungerade oder gerade ist (der erste Kindknoten ist1)
Hier haben wir für ungerade und gerade p-Elemente zwei verschiedene Hintergrundfarben festgelegt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>
<style>
p:nth-of-type(odd)
{
background:#ff0000;
}
p:nth-of-type(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<div>
<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>
</div>
</body>
</html>Testen Sie es heraus ‹/›Verwenden Sie die Formel (an+ b）.Beschreibung: a stellt eine Zyklusgröße dar, N ist ein Zähler (ab 0 beginnend) und b ist der Verschiebungsmaßstab.
Hier haben wir für alle Indizes3der Vielfachen der p-Elemente wurde die Hintergrundfarbe festgelegt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>
<style>
p:nth-of-type(3n+0)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>Dies ist ein Titel</h1>
<p> Erster Absatz.</p>
<p> Zweiter Absatz.</p>
<p> Dritter Absatz.</p>
<p> Vierter Absatz.</p>
<p> Fünfter Absatz.</p>
<p> Sechster Absatz.</p>
<p> Siebter Absatz.</p>
<p> Achter Absatz.</p>
<p>Neunter Absatz.</p>
<p><b>Hinweis:</b> Internet Explorer 8 und frühere Browserversionen unterstützen nicht :nth-last-child() Selektor.</p>
</body>
</html>Testen Sie es heraus ‹/›