Umahluko phakathi kwe ": nth-child", ": first-child" kunye ": first-of-type" in CSS

Isalathiso

Ingcaciso eneenkcukacha

Kuqala, masijonge kule khowudi yesampulu ye-HTML, ngale khowudi siya kukuqonda ukusetyenziswa kwaba bathathu bakhethiweyo nganye nganye.

            <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-mntwana" ucacise banzi

Intsingiselo ye-css1 kule khowudi ingentla yinto yomntwana yesibini kwaye uhlobo "div", yiyo kuphela i-div1 ekhethiweyo. i-div1 yinto yesibini yomntwana kwisitya somzali kwaye uhlobo "div". i-p3 yinto yesibini yomntwana yesikhongozelo somzali, kodwa ayisiyohlobo "div" ke ayikhethwanga. Ukuba sitshintsha isitayile ukuze sisuse i-div phambi komkhethi, emva koko i-p3 iya kukhethwa.

": Umntwana wokuqala" ucacisile ngokweenkcukacha

Intsingiselo ye-css2 kule khowudi ingentla yinto yomntwana wokuqala kunye nohlobo ngu-p, kungoko kukhethwe i-p1 i-p1 yinto yokuqala yomntwana kwisitya somzali kwaye uhlobo "p". Inentsingiselo efanayo nale ingasentla ": nth-child". Ukuba usebenzisa ": nth-child" ukudlulisa ipharamitha iye ku-1, isiphumo siyafana.

": Uhlobo lokuqala" lucacisiwe ngokweenkcukacha

Intsingiselo ye-css3 kule khowudi ingentla kukuba uhlobo lokuqala yinto yomntwana ye- "p" Umahluko apha kwaba bakhethiweyo babini ngasentla kukuba uhlobo oluhambelanayo lufunyenwe kuqala, kwaye ke into yokuqala ehambelana nodidi ifunyenwe. . Ke ezikhethiweyo zi-p1 kunye ne-p3. Zombini i-p1 kunye ne-p3 zizinto zokuqala "p" kwisitya somzali.