Kusiyanitsa pakati pa ": nth-child", ": first-child" ndi ": first-of-type" mu CSS

Kutchulidwa

Kufotokozera mwatsatanetsatane

Choyamba, tiyeni tiwone nambala yotsatirayi ya HTML, kudzera mu code iyi timvetsetsa kugwiritsa ntchito osankha atatuwa m'modzi.

            <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" adalongosola mwatsatanetsatane

Tanthauzo la css1 mu code ili pamwambapa ndi gawo lachiwiri la ana ndipo mtunduwo ndi "div", chifukwa chake div1 yokha imasankhidwa. div1 ndiye gawo lachiwiri la mwana muchidebe cha kholo ndipo mtunduwo ndi "div". p3 ndiye gawo lachiwiri la mwana mu chidebe cha kholo, koma si la "div" motero silimasankhidwa. Ngati titasintha kalembedwe kuti tichotse div kutsogolo kwa wosankhayo, ndiye kuti p3 idzasankhidwanso.

": Mwana woyamba" anafotokoza mwatsatanetsatane

Tanthauzo la css2 mu code ili pamwambapa ndiye gawo loyamba la mwana ndipo mtunduwo ndi p, chifukwa chake p1 yokha imasankhidwa. p1 ndiye gawo loyamba la mwana muchidebe cha kholo ndipo mtunduwo ndi "p". Ili ndi tanthauzo lofananalo ndi pamwambapa ": nth-child". Ngati mugwiritsa ntchito ": nth-child" kupititsa chizindikiro mpaka 1, zotsatira zake ndizofanana.

": Woyamba-mtundu" adalongosola mwatsatanetsatane

Tanthauzo la css3 mu code ili pamwambapa ndikuti mtundu woyamba ndi gawo la mwana la "p" .Kusiyana apa kuchokera pazosankha ziwiri pamwambapa ndikuti mtundu wofananirawo umapezeka koyamba, kenako chinthu choyambirira chomwe chikufanana ndi mtunduwo chimapezeka . Chifukwa chake omwe asankhidwa ndi p1 ndi p3. Onse p1 ndi p3 ndiwo zinthu zoyambirira "p" mu chidebe cha makolo.