Itandukaniro riri hagati ya ": nth-umwana", ": umwana-wambere" na ": uwambere-wubwoko" muri CSS

Reba

Ibisobanuro birambuye

Ubwa mbere, reka turebe kode ya HTML ikurikira, dukoresheje iyi code tuzumva imikoreshereze yabatoranya batatu umwe umwe.

            <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-umwana" yasobanuye birambuye

Ibisobanuro bya css1 muri code yavuzwe haruguru nikintu cya kabiri cyumwana kandi ubwoko ni "div", nuko hatoranijwe div1 gusa. div1 nikintu cya kabiri cyumwana mubintu byababyeyi kandi ubwoko ni "div". p3 nikintu cya kabiri cyumwana mubintu byababyeyi, ariko ntabwo ari ubwoko bwa "div" ntabwo rero bwatoranijwe. Niba duhinduye uburyo bwo gukuraho div imbere yuwatoranije, noneho p3 nayo izatoranywa.

": Umwana-wambere" yasobanuye birambuye

Ibisobanuro bya css2 muri kode yavuzwe haruguru nicyo kintu cyambere cyumwana kandi ubwoko ni p, nuko p1 yonyine yatoranijwe. p1 nikintu cyambere cyumwana mubintu byababyeyi kandi ubwoko ni "p". Ifite ibisobanuro bisa nibyavuzwe haruguru ": nth-umwana". Niba ukoresha ": nth-umwana" kugirango utambike ibipimo kuri 1, ingaruka nimwe rwose.

": Ubwambere-bwubwoko" bwasobanuwe muburyo burambuye

Ubusobanuro bwa css3 muri kode yavuzwe haruguru nuko ubwoko bwa mbere ari ikintu cyumwana wa "p". Itandukaniro hano kuva abatoranya bombi bavuzwe haruguru nuko ubwoko bwambere buboneka mbere, hanyuma ikintu cya mbere gihuye nubwoko kiboneka . Abatoranijwe rero ni p1 na p3. P1 na p3 byombi nibintu byambere "p" mubintu byababyeyi.