In diesem Artikel wird hauptsächlich der Unterschied zwischen den CSS3-Selektoren nth-child und :nth-of-type vorgestellt. Es ist sehr praktisch, dass Freunde, die es benötigen, darauf verweisen können.
Schauen wir uns zunächst einen einfachen an . Beispiel, zuerst der HTML-Teil:
<section>
<p>我是第1个p标签</p>
<p>我是第2个p标签</p> <!-- 希望这个变红 -->
</section>Dann lautet der CSS-Code, der den beiden Selektoren entspricht, wie folgt:
p:nth-child(2) { color: red; }p:nth-of-type(2) { color: red; }Im obigen Beispiel sind die von diesen beiden Selektoren erzielten Effekte konsistent und der Text des zweiten p-Tags wird rot:
Obwohl die endgültigen Auswirkungen der beiden oben genannten Demos gleich sind, sind Unterschiede zwischen den beiden Selektoren unvermeidlich.
Für den :nth-child-Selektor bedeutet dies im einfachen Sprachgebrauch die Auswahl eines Elements:
1 Dies ist ein Absatzelement
2. Dies ist das zweite untergeordnete Element des übergeordneten Tags Element
Für den :nth-of-type-Selektor bedeutet dies die Auswahl eines Elements:
1. Wählen Sie das untergeordnete Element des zweiten Absatzes
des übergeordneten Tags Beispiel: Nachdem Sie Änderungen vorgenommen haben, können Sie den Unterschied zwischen den beiden Selektoren sehen, wie im folgenden HTML-Code gezeigt:
<section>
<p>我是一个普通的p标签</p>
<p>我是第1个p标签</p>
<p>我是第2个p标签</p> <!-- 希望这个变红 -->
</section>Oder der CSS-Testcode, der mit dem übereinstimmt obiges Beispiel:
p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }
Zu diesem Zeitpunkt sind die von den beiden Selektoren gerenderten Ergebnisse unterschiedlich.
p:nth-child(2) Das Rendering-Ergebnis ist nicht, dass der Text des zweiten p-Tags rot wird, sondern der des ersten p-Tags, das das zweite untergeordnete Element des übergeordneten Tags ist.
Die Leistung von p:nth-of-type(2) ist sehr stark, es färbt das zweite p-Tag, das Sie rot rendern möchten.
Das obige ist der detaillierte Inhalt vonVergleichen Sie die Unterschiede zwischen den CSS3-Selektoren :nth-child und :nth-of-type. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
