La differenza tra ": nth-child", ": first-child" e ": first-of-type" nei CSS

Riferimento

Spiegazione dettagliata

Per prima cosa, diamo un'occhiata al seguente codice di esempio HTML, attraverso questo codice capiremo l'uso dei tre selettori uno per uno.

            <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" spiegato in dettaglio

Il significato di css1 nel codice precedente è il secondo elemento figlio e il tipo è "div", quindi è selezionato solo div1. div1 è il secondo elemento figlio nel contenitore padre e il tipo è "div". p3 è il secondo elemento figlio del contenitore padre, ma non è di tipo "div", quindi non è selezionato. Se modifichiamo lo stile per rimuovere il div davanti al selettore, verrà selezionato anche p3.

": Primo figlio" spiegato in dettaglio

Il significato di css2 nel codice sopra è il primo elemento figlio e il tipo è p, quindi è selezionato solo p1. p1 è il primo elemento figlio nel contenitore padre e il tipo è "p". Ha un significato simile al precedente ": nth-child". Se usi ": nth-child" per passare il parametro a 1, l'effetto è esattamente lo stesso.

": First-of-type" spiegato in dettaglio

Il significato di css3 nel codice sopra è che il primo tipo è un elemento figlio di "p". La differenza qui dai due selettori precedenti è che il tipo corrispondente viene prima trovato e quindi si ottiene il primo elemento che corrisponde al tipo . Quindi quelli selezionati sono p1 e p3. Sia p1 che p3 sono i primi elementi "p" nel contenitore padre.