Razlika između ": nth-child", ": first-child" i ": first-of-type" u CSS-u

Referenca

Detaljno objašnjenje

Prvo, pogledajmo sljedeći HTML kôd uzorka, kroz ovaj kôd ćemo razumjeti upotrebu tri selektora jedan po jedan.

            <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>
        

": N-dijete" detaljno objašnjeno

Značenje css1 u gornjem kodu je drugi podređeni element i tip je "div", pa je odabran samo div1. div1 je drugi podređeni element u nadređenom spremniku, a tip je "div". p3 je drugi podređeni element nadređenog spremnika, ali nije tipa "div" pa nije odabran. Ako modificiramo stil tako da uklonimo div ispred selektora, tada će biti odabran i p3.

": Prvo dijete" detaljno objašnjeno

Značenje css2 u gornjem kodu prvi je podređeni element i vrsta je p, pa je odabran samo p1. p1 je prvi podređeni element u nadređenom spremniku, a tip je "p". Ima značenje slično gornjem ": nth-child". Ako koristite ": nth-child" za prosljeđivanje parametra na 1, učinak je potpuno isti.

": Prva vrsta" detaljno objašnjeno

Značenje css3 u gornjem kodu je da je prvi tip podređeni element "p". Ovdje je razlika od gornja dva selektora u tome što se prvo pronađe odgovarajući tip, a zatim se dobije prvi element koji odgovara tipu . Dakle, odabrani su p1 i p3. I p1 i p3 su prvi "p" elementi u nadređenom spremniku.