Explication détaillée de l'utilisation des sélecteurs nth-child et :nth-of-type

Cette fois, je vais vous donner une explication détaillée de l'utilisation des sélecteurs nième-enfant et :ntième-de-type Quelles sont les précautions lors de l'utilisation des sélecteurs nième-enfant et :ntième-. de type ? Ce qui suit est un cas pratique, jetons un coup d'œil.

Regardons d'abord un exemple simple, d'abord la partie HTML :

<section>
    <p>我是第1个p标签</p>
    <p>我是第2个p标签</p>  <!-- 希望这个变红 -->
</section>

Ensuite le code CSS correspondant aux deux sélecteurs est le suivant :

p:nth-child(2) { color: red; }

p:nth-of-type(2) { color: red; }

Dans l'exemple ci-dessus, les effets obtenus par ces deux sélecteurs sont cohérents. Le texte de la deuxième balise p devient rouge :

Bien que les deux ci-dessus L'effet final. de la démo est le même, mais les différences entre les deux sélecteurs sont inévitables.

Pour le sélecteur :nth-child, en langage simple, cela signifie sélectionner un élément :

1 Ceci est un élément de paragraphe
2. Élément

Pour le sélecteur :nth-of-type, cela signifie sélectionner un élément :

1. Sélectionnez l'élément enfant du deuxième paragraphe

de la balise parent Modifions légèrement ce qui précède. exemple. Après avoir effectué des modifications, vous pouvez voir la différence entre les deux sélecteurs, comme indiqué dans le code HTML suivant :

<section>
    <p>我是一个普通的p标签</p>
    <p>我是第1个p标签</p>
    <p>我是第2个p标签</p>  <!-- 希望这个变红 -->
</section>

Ou le code de test CSS cohérent avec l'exemple ci-dessus :

p:nth-child(2) { color: red; }

p:nth-of-type(2) { color: red; }

À l'heure actuelle, les résultats rendus par les deux sélecteurs sont différents.

p:nth-child(2) Le résultat du rendu n'est pas que le texte de la deuxième balise p devient rouge, mais la première balise p, qui est le deuxième élément enfant de la balise parent.

Les performances de p:nth-of-type(2) sont très fortes, il teint la deuxième balise p que vous souhaitez rendre en rouge.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation des événements de pointeur en CSS3

Explication détaillée de l'utilisation de concentration intérieure

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!