Atšķirība starp ": n-child", ": first-child" un ": first-of-type" CSS

Atsauce

Detalizēts paskaidrojums

Vispirms apskatīsim šo HTML parauga kodu, izmantojot šo kodu, mēs sapratīsim trīs atlasītāju lietošanu pa vienam.

            <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-bērns" detalizēti paskaidrots

Iepriekšminētajā kodā css1 nozīme ir otrais pakārtotais elements, un veids ir “div”, tāpēc tiek izvēlēts tikai div1. div1 ir otrais pakārtotais elements vecāku konteinerā, un veids ir “div”. p3 ir vecāku konteinera otrais pakārtotais elements, taču tas nav "div" tipa, tāpēc tas nav atlasīts. Ja mēs mainīsim stilu, lai noņemtu divu selektora priekšā, tad tiks atlasīts arī p3.

": Pirmais bērns" detalizēti paskaidrots

Iepriekšminētajā kodā css2 nozīme ir pirmais pakārtotais elements un tips ir p, tāpēc tiek atlasīts tikai p1. p1 ir pirmais pakārtotais elements vecāku konteinerā, un tips ir “p”. Tam ir līdzīga nozīme kā iepriekšminētajam ": n-child". Ja parametra nodošanai 1 izmantojat ": nth-child", efekts ir tieši tāds pats.

": First-of-type" ir sīki izskaidrots

Iepriekš minētajā kodā css3 nozīme ir tāda, ka pirmais tips ir "p" pakārtotais elements. Šeit atšķirība no iepriekš minētajiem diviem atlasītājiem ir tāda, ka vispirms tiek atrasts atbilstošais tips un pēc tam tiek iegūts pirmais elements, kas atbilst tipam . Tātad izvēlētie ir p1 un p3. Gan p1, gan p3 ir pirmie "p" elementi vecāku konteinerā.