CSS :nth-child() ရွေးချယ်မှု
ဥပမာ
၎င်း၏မိဘ၏ဒုတိယကလေးဖြစ်သော <p> ဒြပ်စင်တိုင်းအတွက် နောက်ခံအရောင်ကို သတ်မှတ်ပါ-
p:nth-child(2)
{
background: red;
}
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
ရွေးချယ်ပေးသူသည် ၎င်း၏မိဘ၏ အမျိုးအစားမခွဲခြားဘဲ n th ကလေးဖြစ်သည့် ဒြပ်စင်တိုင်း နှင့် ကိုက်ညီသည် ။:nth-child(n)
n သည် နံပါတ်တစ်ခု၊ သော့ချက်စာလုံးတစ်ခု သို့မဟုတ် ဖော်မြူလာတစ်ခု ဖြစ်နိုင်သည်။
အကြံပြုချက်- :nth-of-type() ရွေးပေးသည့်ကိရိယာကို ကြည့် ပါ ၊ ၎င်းသည် ၎င်း၏မိဘ၏ အမျိုးအစားတစ်ခု၏ နံပါတ် ကလေးဖြစ်ပြီး၊
ဗားရှင်း- | CSS3 |
---|
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ရွေးချယ်သူကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးပါသည်။
Selector | |||||
---|---|---|---|---|---|
:nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
CSS Syntax
:nth-child(number) {
css declarations;
}
နောက်ထပ် ဥပမာများ
ဥပမာ
အညွှန်းသည် ထူးဆန်းသော သို့မဟုတ် ပင်ဖြစ်သည် (ပထမကလေး၏ အညွှန်းကိန်းသည် 1) နှင့် တူညီသော သော့ချက်စာလုံးများဖြစ်သည်။
ဤတွင်၊ ကျွန်ုပ်တို့သည် ထူးဆန်းသောနှင့်ပင် p အစိတ်အပိုင်းများအတွက် မတူညီသောနောက်ခံအရောင်နှစ်ခုကို သတ်မှတ်ပေးသည်-
p:nth-child(odd)
{
background: red;
}
p:nth-child(even)
{
background: blue;
}
ဥပမာ
ဖော်မြူလာ ( an + b ) ကို အသုံးပြုခြင်း။ ဖော်ပြချက်- a သည် စက်ဝိုင်းအရွယ်အစားကို ကိုယ်စားပြုသည်၊ n သည် ကောင်တာတစ်ခု (0 မှစတင်သည်) နှင့် b သည် အော့ဖ်ဆက်တန်ဖိုးတစ်ခုဖြစ်သည်။
ဤတွင်၊ ကျွန်ုပ်တို့သည် အညွှန်းကိန်း 3 ၏ အတိုးကိန်းဖြစ်သော p ဒြပ်စင်အားလုံးအတွက် နောက်ခံအရောင်ကို သတ်မှတ်သည်-
p:nth-child(3n+0)
{
background: red;
}