CSS :nth-of-type() ပြောင်းလဲသည့်ပုံ

ဒါ၏အသုံးအဆို

CSS :nth-of-type(n) 伪类用于匹配作为其父元素中同类型（标签名）的第 n 个子元素的每个元素。

n 可以是一个数字/索引、一个关键字（odd 或 even）或一个公式（如 an + b）。

提示：查看 :nth-child() 伪类以选择作为其父元素中第 n ကိုယ်တိုင် အချက်အလက် အဖွဲ့များ အတွက် အချက်အလက် အချက်အလက် အသုံးပြုသည်။

အမှတ်

ဘား 1

သုံးပါးစဉ် :nth-of-type() ကိုယ်တိုင် ပုံစံအသုံးပြုပါ

/* div အခြား အပိုင်း အတွက် တတိယ အချက်အလက် */
div:nth-of-type(2) {
  background: red;
}
/* စာအုပ်အချက်အလက် အတွက် တတိယ အချက်အလက် */
li:nth-of-type(2) {
  background: lightgreen;
}
/* ယင်း အခြား အပိုင်း အချက်အလက် အဖွဲ့များ အတွက် မည်သည့် အချက်အလက် ကို ရွေးချယ်လိုက်သည် */
:nth-of-type(3) {
  background: yellow;
}

ကိုယ်တိုင် စစ်ဆေးပါ

ဘား 2

odd နှင့် even အကြမ်းဖြူး အသုံးပြုသည်။ အကြမ်းဖြူး အသုံးပြုသည့် အမှတ် ကို တစ်ခုခု ရွေးချယ်လိုက်သည် (ဥပမာ၊ ပထမ အချက်အလက် အမှတ် 1)

ဒါက ကွက်သာ အမှတ် နှင့် ကွက်မဟုတ် အမှတ် အတွက် အချက်အလက် များ ကို သူ့ အချက်အလက် ကို ဖော်ပြသည်။

p:nth-of-type(odd) {
  background: red;
}
p:nth-of-type(even) {
  background: blue;
}

ကိုယ်တိုင် စစ်ဆေးပါ

ဘား 3

သုံးသပ် ဘာသာစကား (an + b)a အစိတ်အပိုင်း ကို ကိုက်ညီ လိုက်သည်။ n မှ 0 စတင် အခြား အရေးယူ အဖြစ် အသုံးပြုသည်။b အလိုအားဖြင့် အစိတ်အပိုင်း

ဒါက သူ့ အမှတ် 3 ရှိသော အချက်အလက်များ အတွက် သူ့ အမှတ် ကို ဖော်ပြသည်။ ဥပမာ၊ တတိယ၊ ဆယ့်လေးပုံစံ နှင့်တူ။

p:nth-of-type(3n+0) {
  background: red;
}

ကိုယ်တိုင် စစ်ဆေးပါ

ဘား 4

ဒါက သူ့ အမှတ် 3 ရှိသော အချက်အလက်များ အတွက် သူ့ နောက်ခံ အမှတ် ကို ဖော်ပြသည်။ ပြီးတော့ 1 ကို ကျယ်လွန်စွာ ဖြို့ကာ တစ်ကြိမ်တစ်ရံ တစ်ကြိမ် အတွက် တစ်ခုခု ရွေးချယ်လိုက်သည် (ဥပမာ၊ ဒုတိယ၊ တတိယ၊ ဆယ့်လေးပုံစံ နှင့်တူ။)

p:nth-of-type(3n-1) {
  background: red;
}

ကိုယ်တိုင် စစ်ဆေးပါ

ကွန်ပို့ဆောင် စကားဝုဒ်

:nth-of-type(index ကွက်သာ | ကွက်မဟုတ် | an+b) {
  ကွန်ပို့ဆောင် ကြော်ငြာ;
}

နည်းပါးဆိုင်ရာ အချက်အလက်

ဘရောက်တာဗား ထောက်ခံမှု

အချက်အလက်များကို ထိရောက်သော ပုံစံအသုံးပြုသည့် ဘရောက်တာဗား အဆိုပါ ပုံစံအသုံးပြုခြင်း ကို ဖော်ပြသည်။