Bambanci tsakanin ": nth-yaro", ": ɗan fari" da ": na farkon-nau'in" a cikin CSS

Magana

Cikakken bayani

Da farko, bari mu duba lambar samfurin HTML mai zuwa, ta wannan lambar zamu fahimci yadda ake amfani da masu zaɓin uku ɗaya bayan ɗaya.

            <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-yaro" an yi bayani dalla-dalla

Ma'anar css1 a cikin lambar da ke sama shine abu na biyu na yara kuma nau'in shine "div", saboda haka an zaɓi div1 kawai. div1 shine abu na biyu a cikin akwatin mahaifa kuma nau'in shine "div". p3 shine ɓangaren yaro na biyu na akwatin mahaifa, amma ba nau'in "div" bane don haka ba'a zaɓi shi ba. Idan muka gyara salon don cire div a gaban mai zaben, to p3 shima za'a zaba.

": Farkon ɗa" an yi cikakken bayani

Ma'anar css2 a cikin lambar da ke sama shine farkon abu na yara kuma nau'in nau'in p ne, don haka p1 kawai aka zaɓa. p1 shine farkon ɓarnar yaro a cikin akwatin mahaifa kuma nau'in shine "p". Yana da irin wannan ma'anar zuwa sama ": nth-yaro". Idan kayi amfani da ": nth-yaro" don ƙaddamar da ma'aunin zuwa 1, tasirinsa daidai yake.

": Na farko-da-nau'i" an yi bayani dalla-dalla

Ma'anar css3 a cikin lambar da ke sama shine cewa nau'I na farko wani nau'in yaro ne na "p". Bambanci anan anan daga masu zaben guda biyu shine cewa an fara samun irin wanda yayi daidai, sannan kuma an samo farkon abinda yayi daidai da nau'in. . Don haka wadanda aka zaba sune p1 da p3. Dukansu p1 da p3 sune farkon abubuwan "p" a cikin akwatin mahaifa.