Heim > Artikel > Web-Frontend > Der Unterschied zwischen nth-child und nth-of-type in CSS3

Der Unterschied zwischen nth-child und nth-of-type in CSS3

高洛峰Original: 2017-02-28 13:52:451334Durchsuche

Der Unterschied zwischen nth-child und nth-of-type in CSS3 ist eigentlich sehr einfach: Warum heißt :nth-of-type :nth-of-type? Weil es durch „Typ“ unterschieden wird. Das heißt: ele:nth-of-type(n) bezieht sich auf das n-te Element unter dem übergeordneten Element, und ele:nth-child(n) bezieht sich auf das n-te Element unter dem übergeordneten Element, und dieses Element ist ele. Wenn nicht, schlägt die Auswahl fehl.

Der Text klingt etwas undeutlich, daher ist er leichter zu verstehen:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<style>
.demo li:nth-child(2){
color: #ff0000;
}
.demo li:nth-of-type(2){
color: #00ff00;
}
</style>
<body>
<p>
<ul class="demo">
<p>zero</p>
<li>one</li>
<li>two</li>
</ul>
</p>
</body>
</html>

Die Ergebnisse sind wie folgt:

Der Unterschied zwischen nth-child und nth-of-type in CSS3

Im obigen Beispiel wählt .demo li:nth-child(2) den Knoten

one

.demo li:nth- of-type(2) wählt den Knoten

two

Was aber, wenn vor nth-child und nth-of-type keine Tags angegeben werden?

.demo :nth-child(2){
color: #ff0000;
}
.demo :nth-of-type(2){
color: #00ff00;
}

Was wird das Ergebnis sein? Schauen Sie sich die HTML-Struktur an:

<ul class="demo">
<p>first p</p>
<li>first li</li>
<li>second li</li>
<p>second p</p>
</ul>

Ergebnis:

Der Unterschied zwischen nth-child und nth-of-type in CSS3

Wie oben zu sehen ist, wird der Tag-Typ davor nicht angegeben, :nth-child(2) ist immer noch das zweite Element ausgewählt, unabhängig davon, was das Etikett ist. Und :nth-type-of(2) wählt zwei Elemente aus, nämlich das zweite p-Tag und das zweite li-Tag in parent.demo. Es ist ersichtlich, dass :nth-type -of (2) wählt das zweite aller Typ-Tags aus.

Wir haben bereits die grundlegenden Verwendungen und Unterschiede zwischen nth-child und nth-of-type verstanden. Was ist also n in nth-of-type(n) und nth-child(n)?

n in nth-of-type(n) und nth-child(n) kann eine Zahl, ein Schlüsselwort oder eine Formel sein. Zahlen: Dies ist die Verwendung der obigen Beispiele, daher werde ich nicht auf Details eingehen. Schlüsselwörter: Ungerade, gerade

Ungerade und gerade sind Schlüsselwörter, die verwendet werden können, um Unterelemente abzugleichen, deren Indizes ungerade oder gerade sind: Der Index des ersten untergeordneten Elements ist 1

Hier geben wir zwei verschiedene Hintergrundfarben für ungerade und gerade p-Elemente an:

Formel: Oder an Arithmetischer Ausdruck

p:nth-of-type(odd)
{
background:#ff0000;
}
p:nth-of-type(even)
{
background:#0000ff;
}

unter Verwendung der Formel (an + b). Beschreibung: Gibt die Länge der Periode an, n ist der Zähler (beginnend bei 0) und b ist der Offsetwert.

Hier geben wir die Hintergrundfarbe aller p-Elemente an, deren Indizes ein Vielfaches von 3 sind:

Wenn ja ist: nth-of-type(4n+2), es bedeutet, alle Elemente auszuwählen, deren Index ein Vielfaches von 4 plus 2 ist

p:nth-of-type(3n+0)
{
background:#ff0000;
}

Weitere verwandte Artikel zum Unterschied zwischen nth-child und nth-of- Geben Sie CSS3 ein, bitte folgen Sie der chinesischen PHP-Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Randbild im CSS-StilNächster Artikel：Randbild im CSS-Stil

In Verbindung stehende Artikel

Mehr sehen