Tofauti kati ya ": nth-child", ": first-child" na ": first-of-type" katika CSS

Rejea

Maelezo ya kina

Kwanza, wacha tuangalie nambari ifuatayo ya sampuli ya HTML, kupitia nambari hii tutaelewa utumiaji wa wateule watatu kila mmoja.

            <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-mtoto" alielezea kwa kina

Maana ya css1 katika nambari hapo juu ni kipengee cha pili cha mtoto na aina ni "div", kwa hivyo ni div1 tu iliyochaguliwa. div1 ni kipengee cha pili cha mtoto kwenye chombo cha mzazi na aina hiyo ni "div". p3 ni kipengee cha pili cha mtoto cha kontena la mzazi, lakini sio la aina "div" kwa hivyo haichaguliwi. Ikiwa tutarekebisha mtindo ili kuondoa div mbele ya kiteuzi, basi p3 pia itachaguliwa.

": Mtoto wa kwanza" alielezea kwa kina

Maana ya css2 katika nambari hapo juu ni kipengee cha kwanza cha mtoto na aina ni p, kwa hivyo ni p1 tu iliyochaguliwa. p1 ni kipengee cha kwanza cha mtoto kwenye kontena la mzazi na aina ni "p". Ina maana sawa na hiyo hapo juu ": nth-mtoto". Ikiwa unatumia ": nth-child" kupitisha parameter kwa 1, athari ni sawa kabisa.

": Aina ya kwanza" ilielezea kwa undani

Maana yake . Kwa hivyo waliochaguliwa ni p1 na p3. Zote p1 na p3 ni vitu vya kwanza "p" kwenye chombo cha mzazi.