CSS Referenzhandbuch

CSS @Regel(RULES)

Vollständiges CSS-Referenzhandbuch

CSS-Funktionen (Functions)CSS-Selektordatenbank

CSS3 :nth-last-child() Selector

:nth-last-child() ist ein CSS-Phantomklasse, der von den Brüdern rückwärts nach vorne Elemente an bestimmten Positionen abstimmt. Beachten Sie: Diese Phantomklasse und :nth-child ist grundlegend identisch, aber es zählt von Ende aus, nicht von Anfang.

Vollständiges Referenzhandbuch für CSS-Selektoren

Online-Beispiel

Gibt die Hintergrundfarbe und den Zeichensatzeffekt der table an:

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Grund教程(oldtoolbag.com)</title>　
<style>　
table　{
　　border:　1px　solid　blue;
}
/*　Wählt die letzten drei Elemente aus　*/
tr:nth-last-child(-n+3)　{
　　background-color:　pink;
}
/*　Wählt jeden Element von der zweiten bis zum letzten aus　*/
tr:nth-last-child(n+2)　{
　　color:　blue;
}
/*　Wählt nur das zweite letztendliche Element aus　*/
tr:nth-last-child(2)　{
　　font-weight:　600;
}
</style>
</head>
<body>
<table>
　　<tbody>
　　　　<tr>
　　　　　　<td>Zeile eine</td>
　　　　</tr>
　　　　<tr>
　　　　　　　<td>Zeile zwei</td>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>Zeile drei</td>
　　　　　</tr>
　　　　　<tr>
　　　　　　　　<td>Zeile vier</td>
　　　　　</tr>
　　　　　<tr>
　　　　　　　　<td>Zeile fünf</td>
　　　　</tr>
　　</tbody>
</table>
</body>
</html>

Testen Sie es heraus ‹/›

Definition und Verwendung

:nth-last-Der Selector child(n) entspricht jedem Element, das der N-ten Kindelement des Elements entspricht, egal welchen Typ es hat, gezählt von dem letzten Kindelement aus.

nkann eine Zahl, ein Schlüsselwort oder eine Formel sein.

Hinweis: Siehe auch:nth-last-of-type() Selector. Dieser Selector entspricht dem letzten n-ten strukturellen Kindelement des Elternelements.

Beispiel für Selector

tr:nth-last-child(odd) or tr:nth-last-child(2n+1)
　　　 darstellt die geraden Zeilen der HTML-Tabelle:1、3、5und.

tr:nth-last-child(even) or tr:nth-last-child(2n)
　　　 darstellt die ungeraden Zeilen der HTML-Tabelle:2、4、6und.

:nth-last-child(7)
　　　 darstellt den letzten7Element.

:nth-last-child(5n)
　　　 darstellt den letzten5、10、15und Elementen.

:nth-last-child(3n+4)
　　　 darstellt den letzten4、7、10、13und Elementen.

:nth-last-child(-n+3)
　　　 darstellt die letzten drei Elemente einer Gruppe von Brüdern.

p:nth-last-child(n) or p:nth-last-child(n+1)
　　　 Stellen eine Gruppe von <p>-Elementen in einem Brüderknoten dar. Dies entspricht einem einfachen p-Selektor.(Da n von 0 beginnt und der letzte Element1Beginnend mit，n und n+1wählen den gleichen Element aus.)

p:nth-last-child(1) oder p:nth-last-child(0n+1)
　　　 Stellt alle Elemente dar, die am Ende der Brüderknoten stehen<p>。Dies entspricht:last-Der child-Selektor ist gleich.

Browserkompatibilität

Die Zahlen in der Tabelle zeigen die erste Browserversion an, die die Eigenschaft unterstützt。

Selektor
:nth-last-child()	4.0	9.0	3.5	3.2	9.6

Beispiel 1

Gerade und ungerade können als Schlüsselwörter verwendet werden, um nach den Kindelementen zu suchen, deren Index gerade oder ungerade ist。

Hier werden für die umgekehrte Reihenfolge der ungeraden und geraden p-Elemente zwei verschiedene Hintergrundfarben angegeben：

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Grund教程(oldtoolbag.com)</title>　
<style>　
p:nth-last-child(odd)
{
　　　　background:#ff0000;
}
p:nth-last-child(even)
{
　　　　background:#0000ff;
}
</style>
</head>
<body>
<p> Erster Absatz.</p>
<p> Zweiter Absatz.</p>
<p> Dritter Absatz.</p>
<p><b>Achtung:</b> Internet Explorer　8　Browser, die frühere Versionen nicht unterstützen:nth-last-child()　Selektor.</p>
</body>
</html>

Testen Sie es heraus ‹/›

Beispiel 2

Verwenden Sie das Formel（an+ b）.Beschreibung：a stellt die Größe eines Zyklus dar，N ist ein Zähler（beginnend mit 0），und b ist der Verschiebungsparameter。

Hier geben wir für alle Indizes3Der Abschnitt der p-Elemente, deren Index die Kehrwert der Vielfache ist, wird die Hintergrundfarbe angegeben:

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Grund教程(oldtoolbag.com)</title>　
<style>　
p:nth-last-child(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>Achtung:</b> Internet Explorer　8　Browser, die frühere Versionen nicht unterstützen:nth-last-child() Selektor.</p>
</body>
</html>

Testen Sie es heraus ‹/›

Vollständiges Referenzhandbuch für CSS-Selektoren

CSS-Funktionen (Functions)CSS-Selektordatenbank