La diferència entre ": nth-child", ": first-child" i ": first-of-type" a CSS

Referència

Explicació detallada

En primer lloc, vegem el següent codi d’exemple HTML, a través d’aquest codi entendrem l’ús dels tres selectors un per 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" explicat en detall

El significat de css1 al codi anterior és el segon element fill i el tipus és "div", de manera que només se selecciona div1. div1 és el segon element fill del contenidor pare i el tipus és "div". p3 és el segon element fill del contenidor pare, però no és del tipus "div", de manera que no està seleccionat. Si modifiquem l’estil per eliminar el div davant del selector, també se seleccionarà p3.

": Primer fill" explicat detalladament

El significat de css2 al codi anterior és el primer element fill i el tipus és p, de manera que només se selecciona p1. p1 és el primer element fill del contenidor pare i el tipus és "p". Té un significat similar a l'anterior ": nth-child". Si utilitzeu ": nth-child" per passar el paràmetre a 1, l'efecte és exactament el mateix.

": Primer de tipus" explicat amb detall

El significat de css3 al codi anterior és que el primer tipus és un element fill de "p". La diferència d'aquests dos selectors anteriors és que primer es troba el tipus corresponent i, a continuació, s'obté el primer element que coincideix amb el tipus. . Per tant, els seleccionats són p1 i p3. Tant p1 com p3 són els primers elements "p" del contenidor pare.