Az ": n-es gyermek", ": első gyermek" és ": első típusú" különbség a CSS-ben

Referencia

Részletes magyarázat

Először nézzük meg a következő HTML mintakódot, ezen a kódon keresztül fogjuk megérteni a három szelektor használatát egyenként.

            <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 -edik gyermek" részletesen elmagyarázta

A css1 jelentése a fenti kódban a második gyermekelem, a típus pedig "div", tehát csak a div1 van kiválasztva. A div1 a szülőtároló második gyermekeleme, a típus pedig "div". A p3 a szülőtároló második gyermekeleme, de nem "div" típusú, ezért nincs kiválasztva. Ha módosítjuk a stílust úgy, hogy eltávolítsuk a választó előtti div-t, akkor a p3 is kiválasztásra kerül.

": Első gyermek" részletesen elmagyarázta

A css2 jelentése a fenti kódban az első gyermekelem, a típus pedig p, tehát csak a p1 van kiválasztva. p1 az első gyermekelem a szülőtárolóban, a típus pedig "p". Hasonló jelentése van a fenti ": nth-child" -nak. Ha az ": nth-child" parancsot adja át a paraméternek 1-re, a hatás pontosan ugyanaz.

": First-of-type" részletesen kifejtve

A css3 jelentése a fenti kódban az, hogy az első típus a "p" gyermekeleme. A fenti két választótól itt annyi a különbség, hogy először megtalálja a megfelelő típust, majd megkapja az első típussal egyező elemet . Tehát a kiválasztott p1 és p3. A p1 és a p3 egyaránt az első "p" elem a szülőtartályban.