La différence entre ": nth-child", ": first-child" et ": first-of-type" en CSS

Référence

Explication détaillée

Tout d'abord, examinons l'exemple de code HTML suivant, à travers ce code, nous comprendrons l'utilisation des trois sélecteurs un par un.

            <div id="divMain">
    <div>
        <p id="p1">p1</p>
        <div id="div1">div1</div>
        <p id="p2">p2</p>
    </div>
    <p id="p3">p3</p>
    <div id="div2">div2<div>
</div>
<style>
/*css1*/
#divMain div:nth-child(2) {
    color: blue;
}
/*css2*/
#divMain p:first-child {
    color: red;
}
/*css3*/
#divMain p:first-of-type {
    background-color: blue;
}
</style>
        

": Nth-child" expliqué en détail

La signification de css1 dans le code ci-dessus est le deuxième élément enfant et le type est "div", donc seul div1 est sélectionné. div1 est le deuxième élément enfant du conteneur parent et le type est "div". p3 est le deuxième élément enfant du conteneur parent, mais il n'est pas de type "div" donc il n'est pas sélectionné. Si nous modifions le style pour supprimer le div devant le sélecteur, alors p3 sera également sélectionné.

": Premier enfant" expliqué en détail

La signification de css2 dans le code ci-dessus est le premier élément enfant et le type est p, donc seul p1 est sélectionné. p1 est le premier élément enfant du conteneur parent et le type est "p". Il a une signification similaire à ": nth-child" ci-dessus. Si vous utilisez ": nth-child" pour passer le paramètre à 1, l'effet est exactement le même.

": First-of-type" expliqué en détail

La signification de css3 dans le code ci-dessus est que le premier type est un élément enfant de "p". La différence ici par rapport aux deux sélecteurs ci-dessus est que le type correspondant est d'abord trouvé, puis le premier élément qui correspond au type est obtenu . Ainsi, les sélectionnés sont p1 et p3. Les deux p1 et p3 sont les premiers éléments "p" dans le conteneur parent.