Munurinn á ": nth-child", ": first-child" og ": first-of-type" í CSS

Tilvísun

Ítarleg skýring

Fyrst skulum við skoða eftirfarandi HTML sýnishornskóða, í gegnum þennan kóða munum við skilja notkun þriggja valtara einn í einu.

            <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" útskýrt í smáatriðum

Merking css1 í kóðanum hér að ofan er annað barnið og tegundin er "div", þannig að aðeins div1 er valinn. div1 er annað barnið í foreldraílátinu og tegundin er „div“. p3 er annað barnið í foreldraílátinu, en það er ekki af gerðinni "div" svo það er ekki valið. Ef við breytum stílnum til að fjarlægja div fyrir framan valtakkann, þá verður p3 einnig valið.

": Fyrsta barn" útskýrt í smáatriðum

Merking css2 í kóðanum hér að ofan er fyrsta barnið og tegundin er p, þannig að aðeins p1 er valið. p1 er fyrsta barnið í foreldraílátinu og tegundin er "p". Það hefur svipaða merkingu og ofangreint ": nth-child". Ef þú notar ": nth-child" til að færa breytuna yfir á 1 eru áhrifin nákvæmlega þau sömu.

": Fyrsta tegund" útskýrt í smáatriðum

Merking css3 í ofangreindum kóða er sú að fyrsta tegundin er barn frumefni af "p". Munurinn hér frá ofangreindum tveimur völdum er að samsvarandi tegund er fyrst að finna, og þá fæst fyrsti þátturinn sem passar við gerðina . Svo að valdir eru p1 og p3. Bæði p1 og p3 eru fyrstu "p" þættirnir í foreldraílátinu.