ʻO ka ʻokoʻa ma waena o ": nth-child", ": first-child" a me ": first-of-type" ma CSS

Kākauʻōlelo

Wehewehe kikoʻī

ʻO ka mea mua, e nānā i kēia code sample HTML, ma o kēia code e hoʻomaopopo mākou i ka hoʻohana ʻana o nā mea koho ʻekolu i kēlā me kēia.

            <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-keiki" wehewehe wehewehe

ʻO ka manaʻo o css1 i ka pāʻālua i luna ka ʻelua keiki a ʻo ke ʻano he "div", no laila div1 wale nō i koho ʻia div1 ka lua o nā keiki i ka ipu makua a ʻo ke ʻano he "div". p3 ka lua o nā keiki o ka ipu makua, akā ʻaʻole ia he ʻano "div" no laila ʻaʻole i koho ʻia. Inā mākou e hoʻololi i ke kaila e wehe i ka div i mua o ka mea koho, a laila e koho pū ʻia ʻo p3.

": Keiki-mua" wehewehe wehewehe

ʻO ka manaʻo o css2 i ke code i luna ka mea keiki mua a ʻo ke ʻano p, no laila p1 wale nō i koho ʻia. ʻO p1 ka mea keiki mua ma ka ipu makua a ʻo ke ʻano he "p". He ʻano like kona me ka mea i luna ": nth-child". Inā ʻoe e hoʻohana i ": nth-child" e hala i ka palena i 1, ua like ka hopena.

": ʻAno mua" i wehewehe kikoʻī ʻia

ʻO ka manaʻo o css3 i ke code i luna aʻe nei, ʻo ke ʻano mua he keiki ia o "p". ʻO ka ʻokoʻa ma aneʻi mai nā mea koho ʻelua i luna, ʻo ia ka loaʻa mua o ke ʻano like, a laila loaʻa ka mea mua i kūlike i ka ʻano. . No laila, ʻo nā mea i koho ʻia he p1 a me ka p3. ʻO nā p1 a me ka p3 nā mea mua "p" i ka ipu makua.