English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:nth-last-of-type(an+b) This CSS pseudo-class matches those that have an+b-1 elements of the same type as its preceding sibling, where n is a positive or zero value. It is essentially the same as :nth-of-type is the same, but it counts from the end instead of the beginning.
Vollständiges Referenzhandbuch für CSS-Selektoren
Give the last2a span element fills the background color:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Grund教程(oldtoolbag.com)</title>
<style>
span:nth-last-of-type(2) {
background-color: lime;
}
</style>
</head>
<body>
<div>
<span>This is a span.</span>
<span>This is another range.</span>
<em>Emphasis.</em>
<span>Wow, this range has become blurred! </span>
<strike>This was deleted.</strike>
<span>This is the last span.</span>
</div>
</body>
</html>Testen Sie es heraus ‹/›:nth-last-of-type( <nth> ) where <nth> = <an-plus-b> | even | odd
:nth-last-of-type(n)Selektor matcht den n-ten Brüder im selben Typ.
n kann eine Zahl, ein Schlüsselwort oder eine Formel sein.
Hinweis:Bitte beachten Sie::nth-last-child()Selektor. Dieser Selektor matcht den n-ten strukturellen Kindelement im Elternelement.
Die Zahlen in der Tabelle stellen die Versionsnummer des ersten Browsers dar, der die Eigenschaft unterstützt.
| Selektor | |||||
|---|---|---|---|---|---|
| :nth-last-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
Gerade und ungerade können als Schlüsselwörter verwendet werden, um Kindelemente zu matchen, deren Index gerade oder ungerade ist.
Hier legen wir für die umgekehrten p-Elemente mit ungerader und gerader Ordnung zwei verschiedene Hintergrundfarben fest:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Grund教程(oldtoolbag.com)</title>
<style>
p:nth-last-of-type(odd)
{
background:#ff0000;
}
p:nth-last-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 Größe des Zyklus dar, N ist ein Zähler (beginnend bei 0), und b ist der Verschiebungsmaßstab.
Hier legen wir für alle Indizes3der p-Elemente mit der umgekehrten Reihenfolge der Vielfachen angegebenen Indizes haben die Hintergrundfarbe festgelegt:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Grund教程(oldtoolbag.com)</title>
<style>
p:nth-last-of-type(3n+0)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>Das 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>Achtung:</b> Internet Explorer 8 und ältere Browserversionen unterstützen nicht :nth-last-child() Selektor.</p>
</body>
</html>Testen Sie es heraus ‹/›