Farqiga u dhexeeya ": nth-child", ": ilmaha koowaad" iyo ": nooca ugu horeeya" ee CSS

Tixraac

Sharaxaad faahfaahsan

Marka hore, aan fiirino nambarka soo socda ee HTML, koodhkan ayaynu ku fahmaynaa adeegsiga saddexda xul mid mid.

            <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>
        

": Cunugga Nth" waxaa si faahfaahsan loogu sharaxay

Micnaha css1 ee koodhka kor ku xusan waa cunsurka labaad ee ilmaha nooca uu yahay "div", marka div1 oo keliya ayaa la xushaa. div1 waa cunsurka labaad ee cunugga ku jira weelka waalidka nooca uu yahay "div". p3 waa cunugga labaad ee cunugga ku jira weelka waalidka, laakiin ma aha nooca "div" sidaa darteed looma xulan. Haddii aan wax ka baddalno qaabka si aan uga saarno qaybta hore ee xulista, markaa p3 sidoo kale waa la dooran doonaa.

": Cunugga koowaad" waxaa si faahfaahsan loogu sharaxay

Micnaha css2 ee koodhka kor ku xusan waa cunsurka ugu horeeya nooca uu yahay p, markaa p1 kaliya ayaa la xushay p1 waa cunugga cunugga ugu horreeya weelka waalidka nooca uu yahay "p". Waxay leedahay macno la mid ah tan kore: "nth-child". Haddii aad isticmaasho ": nth-child" si aad ugu gudbiso halbeegga 1, saamayntu waa isku mid.

": Nooca ugu horreeya" ayaa si faahfaahsan loogu sharraxay

Micnaha css3 ee koodhka kor ku xusan ayaa ah in nooca hore yahay cunug canug ka mid ah "p". . Marka kuwa la xushay waa p1 iyo p3. Labadaba p1 iyo p3 ayaa ah walxaha ugu horeeya "p" ee ku jira weelka waalidka.