အတုအယောင်အတန်းအစား nth-of-type
အတုအယောင်အတန်းအစား nth-of-type သည်
သတ်မှတ်ထားသောအမျိုးအစား၏ n-th မျိုးဆက်ဖြစ်သည့် အစိတ်အပိုင်းကို ရွေးချယ်သည်။
ဆိုလိုသည်မှာ၊ ကျွန်ုပ် h2:nth-of-type(4) ဟု ရေးပါက
- မိဘထဲတွင် 4-th h2 ကို တွေ့ရှိမည် (nth-child နှင့် မတူဘဲ၊
ထိုအတုအယောင်အတန်းအစားသည် မိဘထဲတွင်
4-th အစိတ်အပိုင်းဖြစ်သည့် h2 ကိုသာ တွေ့ရှိမည်)။
ဝါကျဖွဲ့စည်းပုံ
cssရွေးချယ်သူ:nth-of-type(ဂဏန်း | odd | even | ဖော်ပြချက်){
}
တန်ဖိုးများ
| တန်ဖိုး | ဖော်ပြချက် |
|---|---|
| ဂဏန်း |
1 မှ စတင်သော အပြုသဘောဆောင်သည့်ဂဏန်း။ ကျွန်ုပ်တို့ ဆက်သွယ်လိုသည့် အစိတ်အပိုင်း၏ အမှတ်စဉ်ကို သတ်မှတ်ပေးသည်။
အစိတ်အပိုင်းများ၏ အမှတ်စဉ်သည် 1 မှ စတင်သည်။
|
odd |
မကိန်းဂဏန်း အစိတ်အပိုင်းများ။ |
even |
စုံဂဏန်း အစိတ်အပိုင်းများ။ |
| ဖော်ပြချက် |
အင်္ဂလိပ်အက္ခရာ n ဖြင့် အထူးဖော်ပြချက်များ ဖွဲ့စည်းနိုင်သည်၊
ထို n သည် သုည (တစ်မှ မဟုတ်)
မှ အဆုံးမရှိသော ကိန်းပြည့်အားလုံးကို ကိုယ်စားပြုသည်။ ထို့ကြောင့်၊ 2n - ဆိုလိုသည်မှာ စုံကိန်းအားလုံး
(ဒုတိယမှ စတင်၍)။
ဤအရာကို မည်သို့နားလည်နိုင်မည်နည်း။ n ထဲသို့
0 မှ စတင်၍ ဂဏန်းများကို အစဉ်လိုက် အစားထိုးကြည့်ပါ။ n = 0 ဖြစ်ပါက၊ 2n သည် 0 ကို ပေးမည် -
�ိုကဲ့သို့သော အစိတ်အပိုင်းမရှိ (အစိတ်အပိုင်းများ အမှတ်စဉ်သည် 1 မှစသည်)၊
အကယ်၍ n = 1 ဖြစ်ပါက၊ 2n သည် 2 ကို ပေးမည် - ဒုတိယအစိတ်အပိုင်း၊ အကယ်၍ n = 2 ဖြစ်ပါက၊
2n သည် 4 ကို ပေးမည် - စတုတ္ထအစိတ်အပိုင်း။ 3n ဟု ရေးပါက - ဤသည်မှာ
တတိယမြောက် အစိတ်အပိုင်းတိုင်း (တတိယမှ စတင်၍)၊ စသဖြင့် ဖြစ်လိမ့်မည်။
|
နမူနာ
မိဘထဲတွင် 2-th h2 ဖြစ်သည့် h2 ကို ရှာကြည့်ကြပါစို့။
html<div>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
</div>cssh2:nth-of-type(2) {
color: red;
}
Результат:
နမူနာ
စုံဂဏန်း h2 အားလုံးကို ရှာကြည့်ကြပါစို့။
html<div>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
</div>cssh2:nth-of-type(even) {
color: red;
}
Результат:
နမူနာ
မကိန်းဂဏန်း h2 အားလုံးကို ရှာကြည့်ကြပါစို့။
html<div>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
<h2>ခေါင်းစဉ်</h2>
<p>စာပိုဒ်</p>
</div>cssh2:nth-of-type(odd) {
color: red;
}
Результат: