": N. Lapsi", ": ensimmäinen lapsi" ja ": ensimmäisen tyyppinen" ero CSS: ssä

Viite

Yksityiskohtainen selitys

Tarkastellaan ensin seuraavaa HTML-mallikoodia, jonka avulla ymmärrämme kolmen valitsimen käytön yksitellen.

            <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: s lapsi" selitetty yksityiskohtaisesti

Css1: n merkitys yllä olevassa koodissa on toinen alielementti ja tyyppi on "div", joten vain div1 valitaan. div1 on toinen alielementti emosäiliössä ja tyyppi on "div". p3 on vanhemman säilön toinen alielementti, mutta se ei ole tyyppiä "div", joten sitä ei ole valittu. Jos muokkaamme tyyliä poistamaan div valitsimen edestä, myös p3 valitaan.

": Ensimmäinen lapsi" selitetty yksityiskohtaisesti

Css2: n merkitys yllä olevassa koodissa on ensimmäinen alielementti ja tyyppi on p, joten vain p1 valitaan. p1 on ylätason ensimmäinen alielementti ja tyyppi on "p". Sillä on samanlainen merkitys kuin yllä:: nth-child. Jos käytät parametrin 1: lle välittämistä ": nth-child", vaikutus on täsmälleen sama.

": First-of-type" selitetty yksityiskohtaisesti

Css3: n merkitys yllä olevassa koodissa on, että ensimmäinen tyyppi on "p" -alielementti. Ero tässä kahdesta yllä olevasta valitsimesta on, että vastaava tyyppi löydetään ensin ja sitten saadaan ensimmäinen tyyppiä vastaava elementti . Joten valitut ovat p1 ja p3. Sekä p1 että p3 ovat ensimmäiset "p" -elementit emosäiliössä.