Introduction à la différence entre :nth-child et :nth-of-type dans les sélecteurs CSS3

1. :nth-child

1.1 Description

:nth-child(n) le sélecteur correspond au Nième élément enfant qui appartient à son élément parent, quel que soit du type d'élément. n peut être un nombre, un mot-clé ou une formule.

Remarque : Si le Nième sous-élément est différent du type d'élément sélectionné, le style sera invalide !

1.2 Exemple

<style>
p>p:nth-child(2){
    color:red;
}
</style>
<p>
    <p>我是第1个段落</p>
    <p>我是第2个段落</p><!--符合条件：1、是<p>元素，2、父元素<p>的第二个元素。这里被选择，会变成红色。-->
    <p>我是第3个段落</p>
</p>
<p>
    <p>我是第1个段落</p>
    <span>我是第1个文本</span><!--不符合条件：不是<p>元素，没有被选择-->
    <p>我是第2个段落</p>
</p>

1.3 Amélioration

Si vous souhaitez que le deuxième 45a2772a6b6107b401db3c9b82c049c2 ci-dessus prenne effet, vous pouvez supprimer la sélection de l'élément enfant e388a4556c0f65e1904146cc1a846bee et écrivez à un parent Ajoutez un espace à l'élément e388a4556c0f65e1904146cc1a846bee pour éviter que :nth-child ne prenne effet.

<style>
p :nth-child(2){ //p+空格，只根据父元素选择
    color:red;
}
</style>
<p>
    <p>我是第1个段落</p>
    <span>我是第1个文本</span><!--符合条件-->
    <p>我是第2个段落</p>
</p>

2. :nth-of-type(n) correspondant au sélecteur appartient à Chaque élément du Nième élément enfant d'un type spécifique de l'élément parent. n peut être un nombre, un mot-clé ou une formule.

2.2 Exemple

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!