Skirtumas tarp „: n-tas vaikas“, „: pirmasis vaikas“ ir „: pirmojo tipo“ CSS

Nuoroda

Išsamus paaiškinimas

Pirmiausia pažvelkime į šį HTML pavyzdinį kodą, per šį kodą suprasime trijų pasirinkimo elementų naudojimą po vieną.

            <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-tasis vaikas" išsamiai paaiškinta

Pirmiau pateiktame kode css1 reikšmė yra antrasis antrinis elementas, o tipas yra „div“, todėl pasirenkamas tik div1. „div1“ yra antrasis antrinis pirminio sudėtinio elemento elementas, o tipas yra „div“. p3 yra antrasis pirminio sudėtinio rodinio antrinis elementas, tačiau jis nėra „div“ tipo, todėl nėra pasirinktas. Jei modifikuosime stilių, kad pašalintume div prieš selektorių, tada bus pasirinktas ir p3.

": Pirmasis vaikas" išsamiai paaiškinta

Pirmiau pateiktame kode css2 reikšmė yra pirmasis antrinis elementas, o tipas yra p, todėl pasirenkamas tik p1. p1 yra pirmasis pirminis sudėtinio rodinio antrinis elementas, o tipas yra „p“. Jis turi panašią reikšmę kaip ir aukščiau pateiktas „: n-tas vaikas“. Jei parametrą perduoti 1 naudosite „: n-tas vaikas“, efektas yra visiškai toks pats.

": Pirmo tipo" paaiškinta išsamiai

Pirmiau nurodytame kode css3 reikšmė yra ta, kad pirmasis tipas yra antrinis „p“ elementas. Skirtumas nuo pirmiau nurodytų dviejų parinkiklių yra tas, kad pirmiausia randamas atitinkamas tipas, o tada gaunamas pirmasis tipas, atitinkantis tipą . Taigi pasirinktos yra p1 ir p3. Tiek p1, tiek p3 yra pirmieji „p“ elementai pirminiame sudėtiniame inde.