CSS-de ": nth-çaga", ": birinji çaga" bilen ": birinji görnüşli" arasyndaky tapawut

Salgylanma

Jikme-jik düşündiriş

Ilki bilen, aşakdaky HTML nusga koduna seredeliň, bu kod arkaly üç saýlaýjynyň ulanylyşyna ýeke-ýekeden düşüneris.

            <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-çaga" jikme-jik düşündirdi

Aboveokardaky koddaky css1-iň manysy ikinji çaga elementidir we görnüşi "div", şonuň üçin diňe div1 saýlanýar. div1 ene konteýnerdäki ikinji çaga elementidir we görnüşi "div". p3 ene konteýneriň ikinji çaga elementidir, ýöne "div" görnüşi däl, şonuň üçin saýlanmady. Saýlaýjynyň öňündäki diwini aýyrmak üçin stili üýtgeden bolsak, p3 hem saýlanar.

": Ilkinji çaga" jikme-jik düşündirdi

Aboveokardaky koddaky css2-iň manysy ilkinji çaga elementidir we görnüşi p, şonuň üçin diňe p1 saýlanýar. p1 ene konteýnerdäki ilkinji çaga elementidir we görnüşi "p". Aboveokardaky ": nth-çaga" bilen meňzeş manysy bar. Parametri 1-e geçirmek üçin ": nth-child" ulansaňyz, täsiri edil şol bir zat.

": Birinji görnüş" jikme-jik düşündirildi

Aboveokardaky koddaky css3-iň manysy, birinji görnüşiň "p" çaga elementi bolmagydyr. Hereokardaky iki saýlaýjydan tapawudy, degişli görnüşiň ilki tapylmagy, soňra görnüşe gabat gelýän ilkinji elementiň alynmagydyr. . Şeýlelik bilen saýlananlar p1 we p3. P1 we p3 ikisi hem esasy konteýnerdäki ilkinji "p" elementlerdir.