CSS တွင် ": nth-child", ": first-child" နှင့် ": first-of-type" အကြားခြားနားချက်

ကိုးကားစရာ

အသေးစိတ်ရှင်းပြချက်

ပထမ ဦး ဆုံးအောက်ပါ HTML နမူနာကုဒ်ကိုကြည့်ကြစို့။ ဤကုဒ်အားဖြင့် selector သုံးခု၏တစ်ခုချင်းစီကိုအသုံးပြုခြင်းကိုကျွန်ုပ်တို့နားလည်လိမ့်မည်။

            <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" တွင်အသေးစိတ်ရှင်းပြခဲ့သည်

အပေါ်က code မှာ css1 ရဲ့အဓိပ္ပာယ်ကဒုတိယမြောက်ကလေး element ဖြစ်ပြီးအမျိုးအစားက "div" ဖြစ်တယ်။ ဒါကြောင့် div1 ကိုပဲရွေးလိုက်တယ်။ div1 သည် parent container ထဲရှိဒုတိယမြောက် element တစ်ခုဖြစ်ပြီး type သည် div ဖြစ်သည်။ p3 သည်မိဘများသိုလှောင်ရာနေရာ၏ဒုတိယမြောက်ကလေး element တစ်ခုဖြစ်သည်၊ သို့သော်၎င်းသည် "div" အမျိုးအစားမဟုတ်သောကြောင့်၎င်းကိုမရွေးချယ်ပါ။ Selector ၏ရှေ့တွင် div ကိုဖယ်ရှားရန်ကျွန်ုပ်တို့သည်စတိုင်ကိုပြုပြင်ပါက p3 ကိုလည်းရွေးချယ်လိမ့်မည်။

": ပထမ ဦး ဆုံးကလေး" ကိုအသေးစိတ်ရှင်းပြသည်

အပေါ်က code မှာ css2 ရဲ့အဓိပ္ပာယ်ကပထမဆုံးကလေးက element ဖြစ်ပြီးအမျိုးအစားက p ဖြစ်တယ်။ ဒါကြောင့် p1 ကိုသာရွေးလိုက်တယ်။ p1 သည်မိဘကွန်တိန်နာအတွင်းပထမဆုံးကလေး element ဖြစ်ပြီး၎င်းသည် "p" ဖြစ်သည်။ ၎င်းသည်အထက်ပါ ": nth-child" နှင့်ဆင်တူသည်။ အကယ်၍ သင်သည် ": nth-child" ကို သုံး၍ parameter ကို 1 သို့ကူးပြောင်းလျှင်အကျိုးသက်ရောက်မှုသည်အတူတူပင်ဖြစ်သည်။

": ပထမအမျိုးအစား" ကိုအသေးစိတ်ရှင်းပြခဲ့သည်

အပေါ်က code မှာ css3 ရဲ့အဓိပ္ပာယ်ကပထမအမျိုးအစားသည် "p" ၏ကလေးသူငယ်ဒြပ်စင်တစ်ခုဖြစ်သည်။ အထက်ဖော်ပြပါရွေးချယ်မှုနှစ်ခုမှခြားနားချက်မှာသက်ဆိုင်ရာအမျိုးအစားကိုပထမ ဦး စွာတွေ့ရှိပြီးနောက်အမျိုးအစားနှင့်ကိုက်ညီသောပထမ element ကိုရရှိသည်။ ။ ဒီတော့ရွေးချယ်ထားသူတွေက p1 နဲ့ p3 ။ p1 နှင့် p3 နှစ်ခုစလုံးသည် parent container ထဲမှာပထမဆုံး "p" element တွေဖြစ်ပါတယ်။