Ang pagkakaiba sa pagitan ng ": nth-child", ": first-child" at ": first-of-type" sa CSS

Sanggunian

Detalyadong paliwanag

Una, tingnan natin ang sumusunod na HTML sample code, sa pamamagitan ng code na ito mauunawaan natin ang paggamit ng tatlong mga tagapili nang paisa-isa.

            <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" na detalyadong nagpapaliwanag

Ang kahulugan ng css1 sa nasa itaas na code ay ang pangalawang elemento ng bata at ang uri ay "div", kaya div1 lamang ang napili. Ang div1 ay ang pangalawang elemento ng anak sa lalagyan ng magulang at ang uri ay "div". Ang p3 ay ang pangalawang elemento ng anak ng lalagyan ng magulang, ngunit hindi ito uri ng "div" kaya hindi ito napili. Kung binago namin ang istilo upang alisin ang div sa harap ng pumipili, pagkatapos ay pipiliin din ang p3.

": Unang anak" na detalyadong ipinaliwanag

Ang kahulugan ng css2 sa nasa itaas na code ay ang unang elemento ng bata at ang uri ay p, kaya't p1 lamang ang napili. Ang p1 ang unang elemento ng bata sa lalagyan ng magulang at ang uri ay "p". Mayroon itong katulad na kahulugan sa nabanggit na ": nth-child". Kung gagamitin mo ang ": nth-child" upang maipasa ang parameter sa 1, ang epekto ay eksaktong pareho.

": First-of-type" na detalyadong ipinaliwanag

Ang kahulugan ng css3 sa nasa itaas na code ay ang unang uri ay isang elemento ng bata ng "p". Ang pagkakaiba dito mula sa itaas na dalawang tagapili ay ang katumbas na uri ay unang natagpuan, at pagkatapos ang unang elemento na tumutugma sa uri ay nakuha . Kaya ang mga napili ay p1 at p3. Parehong p1 at p3 ang unang "p" na mga elemento sa lalagyan ng magulang.