အသုံးပြုခြင်း: nth-of type ကို (ဎ) ဇယားနှင့်အတူ
ဖတ်ရှုဖို့စားပွဲပိုမိုလွယ်ကူစေရန်, ကမကြာခဏနောက်ခံအရောင်တွေပြောင်းနှင့်အတူစတိုင်တန်းစီဖို့အထောက်အကူဖြစ်ပါတယ်။ စားပွဲ style မှအသုံးအများဆုံးနည်းလမ်းများထဲမှတစ်ခုသည်အခြားအတန်း၏နောက်ခံအရောင်ကိုသတ်မှတ်ဖို့ဖြစ်ပါတယ်။ ဤသည်ကိုမကြာခဏအဖြစ်ရည်ညွှန်းတာဖြစ်ပါတယ် "မြင်းကျားဒဏ်ချက်။ "
သင်ဤပွီးမွောကျနိုငျ CSS ကိုလူတန်းစားနှင့်အတူသည်အခြားအတန်း setting များနှင့်ထိုလူတန်းစားများအတွက်စတိုင် defining ဖွငျ့ဖွစျသညျ။ ဒါဟာအလုပ်ဖြစ်တယ်ဒါပေမယ့်လည်ဖို့အကောင်းဆုံးသို့မဟုတ်အထိရောက်ဆုံးနည်းလမ်းတစ်ခုတော့မဟုတ်ပါဘူး။
ဒီနည်းလမ်းကိုသုံးပြီးတဲ့အခါ, သငျသညျအသီးအသီးအတန်းသေချာစေရန် table ထဲမှာတိုင်းတစ်ခုတည်းအတန်းတည်းဖြတ်ရန်ရှိစေခြင်းငှါသင်သည်ထိုစားပွဲပေါ်မှာတည်းဖြတ်ရန်လိုအပ်ပါတယ်အခါတိုင်းပြောင်းလဲမှုများနှင့်ကိုက်ညီသည်။ သင်သည်သင်၏စားပွဲပေါ်မှာအသစ်တစ်ခုတန်းထည့်သွင်းမယ်ဆိုရင်ဥပမာ, အောက်ကသည်အခြားအတန်းအတန်းကိုပြောင်းလဲရှိသည်ဖို့လိုအပ်ပါတယ်။
CSS ကို မြင်းကျားစင်းနှင့်အတူစားပွဲ style လုပ်ဖို့လွယ်ကူစေသည်။ သင်သည်မည်သည့်အပိုထပ်ထည့်ဖို့မလိုအပ်ပါဘူး HTML ကို nth-of type ကို (ဎ): သင်ရုံကိုသုံး attribute တွေသို့မဟုတ် CSS ကိုအတန်း CSS ကို selector ။
အဆိုပါ: nth-of type ကို (ဎ) selector သငျသညျမိဘနှင့်မောင်နှမ element တွေကိုသူတို့ရဲ့ဆက်ဆံရေးအပေါ်အခြေခံပြီး element တွေကို style လုပ်ဖို့ခွင့်ပြု CSS ကိုတစ်ဦးတည်ဆောက်ပုံ Pseudo-class ကိုဖြစ်ပါတယ်။ သင်သည်သူတို့၏အရင်းအမြစ်အမိန့်အပေါ်အခြေခံပြီးတဦးတည်းသို့မဟုတ်ထိုထက်ပို element တွေကိုရွေးဖို့ကသုံးနိုင်သည်။ တနည်းအားဖြင့်ဒါဟာသူ့ရဲ့မိဘတစ်ဦးအထူးသဖြင့်အမျိုးအစားများ၏ nth ကလေးသည်သောဒြပ်စင်ကိုက်ညီနိုင်ပါတယ်။
အဆိုပါစာဎ (ထိုကဲ့သို့သောထူးဆန်းသို့မဟုတ်ပင်ကဲ့သို့) သော့ချက်စာလုံး, ဂဏန်းတစ်ခု, ဒါမှမဟုတ်တစ်ဦးပုံသေနည်းဖြစ်နိုင်ပါတယ်။
ဥပမာအားဖြင့်, အဝါရောင်နောက်ခံအရောင်နှင့်အတူသည်အခြားစာပိုဒ် tag ကို style လုပ်ဖို့, သင့် CSS ကိုစာရွက်စာတမ်းပါဝင်မည်ဖြစ်သည်:
p: nth-of type ကို (ထူးဆန်း) {
နောက်ခံ: အဝါရောင်;
}
သင့်ရဲ့ HTML ကိုဇယားနှင့်အတူ Start
ပထမဦးစွာသင်ပုံမှန်အားဖြင့် HTML မှာရေးထားမယ်လို့အဖြစ်သင့်စားပွဲဖန်တီးပါ။ အဆိုပါအတန်းသို့မဟုတ်ကော်လံမှမဆိုအထူးအတန်းကိုထည့်သွင်းမထားပါနဲ့။
သင့်ရဲ့ကိုနှိပ်ပြီးများတွင်အောက်ပါ CSS ကို add:
TR: nth-of type ကို (ထူးဆန်း) {
background-color: #ccc;
}
ဒါကပထမဦးဆုံးအတန်းနှင့်အတူစတင်မီးခိုးရောင်နောက်ခံအရောင်နှင့်အတူသည်အခြားအတန်း style ပါလိမ့်မယ်။
ထိုနည်းတူကော်လံများပြောင်းစတိုင်
သင်သည်သင်၏စားပွဲအတွက်ကော်လံမှပုံစံ၏တူညီသောမျိုးလုပ်နိုင်ပါတယ်။ အဲဒီလိုလုပ်ဖို့, ရိုးရိုး TD ရန်သင့် CSS ကိုအတန်းအစားထဲတွင် TR ပြောင်းပေးပါ။ ဥပမာ:
td: nth-of type ကို (ထူးဆန်း) {
background-color: #ccc;
}
တစ်ဦး nth-of type ကို (ဎ) Selector အတွက် Formula ကိုသုံးပြီး
အဆိုပါ selector များတွင်အသုံးပြုမယ့်ဖော်မြူလာများအတွက် syntax တခု + ခဖြစ်ပါတယ်။
တစ်သံသရာသို့မဟုတ်အညွှန်းကိန်းရဲ့အရွယ်အစားကိုကိုယ်စားပြုမယ့်အရေအတွက်ဖြစ်ပါတယ်။
ဎအမှန်တကယ်အက္ခရာဟာ "n" ဖြစ်ပြီး 0 မှာသရုပ်ဆောင်သောကောင်တာ, ကိုယ်စားပြုတယ်။
+ ကိုလည်းဖြစ်နိုင်သည်သည့်အော်ပရေတာဖြစ်ပါတယ် "-"
ခကျ selector နောက်ခံအရောင်လျှောက်ထားစတင်သင့်ပါတယ်မည်မျှအတန်းတစ်ခုကိန်းနှင့် offset တန်ဖိုးဥပမာကိုကိုယ်စားပြုတယ်။ တစ်ဦးအော်ပရေတာအတွက်ပုံသေနည်းတွင်ထည့်သွင်းပါကဤလိုအပ်ပါသည်။
သငျသညျတိုင်း 3rd အတန်းများအတွက်နောက်ခံအရောင်ကိုသတ်မှတ်ချင်တယ်ဆိုရင်ဥပမာအားဖြင့်, သင့်ဖော်မြူလာ 0 င် + 3n ပါလိမ့်မယ်။ သင့်ရဲ့ CSS ကိုဤကဲ့သို့သောကြည့်ရှုစေခြင်းငှါ,:
TR: nth-of type ကို (3n + 0) {
နောက်ခံ: slategray;
}
nth-of type ကိုရွေးအသုံးပြုခြင်းများအတွက်အထောက်အကူဖြစ်စေ Tools များ
သင်လိုချင်တဲ့ကြည့်အောင်မြင်ရန်ဖို့ syntax သတ်မှတ်ကူညီနိုင်မယ့်အသုံးဝင်သော tool အဖြစ် nth စမ်းသပ် site ကို: သင် Pseudo-class ကို nth-of type ကို selector သုံးပြီး၏ပုံသေနည်းအသှငျအပွငျကနည်းနည်းစိတ်ညစ်စရာခံစားနေလျှင်, စမ်းပါ။ (သင်လည်းထိုကဲ့သို့သော nth ကလေးအဖြစ်လွန်း, ဒီမှာကတခြား Pseudo-အတန်းနှင့်အတူစမ်းသပ်နိုင်ပါသည်) nth-of type ကိုရွေးဖို့့ dropdown menu ကိုအသုံးပြုပါ။