Detaillierte Erläuterung der Verwendung der Selektoren nth-child und :nth-of-type

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Verwendung der Selektoren nth-child und :nth-of-type geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung der Selektoren nth-child und :nth-? of-type? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Schauen wir uns zunächst ein einfaches Beispiel an, zunächst den 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. Der Text des zweiten p-Tags wird rot:

Obwohl die beiden oben genannten Der endgültige Effekt Die Funktionsweise der Demo ist die gleiche, Unterschiede zwischen den beiden Selektoren sind jedoch 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 dem CSS-Testcode, der mit dem obigen Beispiel übereinstimmt:

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.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Detaillierte Erklärung der Verwendung von Zeigerereignissen in CSS3

Detaillierte Erklärung der Verwendung von Fokus-innerhalb

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der Selektoren nth-child und :nth-of-type. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!