Der Unterschied zwischen nth-child und nth-of-type in CSS3-CSS-Tutorial-php.cn

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

高洛峰

Freigeben： 2017-02-28 13:52:45

Original

1325 Leute haben es durchsucht

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>

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

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