ဆက်ခံရွေးချယ်မှုတွင် အစပြုသူများ၏ အမှား
အောက်ပါ selector ကို ကြည့်ပါ။
p.eee {
color: red;
}
အဆိုပါ selector သည် class eee ရှိသော စာပိုဒ်များကို ရွေးချယ်မည်ဆိုသည်ကို သင်သိပြီးဖြစ်သင့်ပါသည်။
ဥပမာ၊ ဤအရာများ-
<p class="eee">
lorem ipsum
</p>
<p class="eee">
lorem ipsum
</p>
ယခု ဤ selector ကို ကြည့်ပါ။
p .eee {
color: green;
}
ဤ selector သည် ယခင်ကထက် ကွဲပြားချက်မှာ tag အမည်နှင့် class အမည်ကြားတွင် ခြားနားချက် (space) တစ်ခု ရှိခြင်းဖြစ်သည်။
ထိုခြားနားချက်သည် ဆက်ခံရွေးချယ်မှု (descendant selector) ကို ကိုယ်စားပြုပါသည်။
ဆိုလိုသည်မှာ ဤကိစ္စတွင် ကျွန်ုပ်တို့သည် စာပိုဒ်များအတွင်း၌ တည်ရှိသော class eee ရှိသည့် element အားလုံးကို ရွေးချယ်နေခြင်းဖြစ်သည်။
ဥပမာ၊ ဤ selector သည် အောက်ပါ span များကို ရွေးချယ်မည်။
<p>
lorem <span class="eee">ipsum</span>
</p>
<p>
lorem <span class="eee">ipsum</span>
</p>
ကုဒ် run ထားသော ရလဒ်။
ထို့ကြောင့် နောက်တစ်ကြိမ်။ p.eee - ထိုသို့သော selector သည် class eee ရှိသည့် စာပိုဒ်များကို ရွေးချယ်ပါသည်။
သို့သော် ကျွန်ုပ်ဤသို့လုပ်ပါက p .eee၊ ထိုအခါ စာပိုဒ်များ အတွင်း၌ တည်ရှိသော class eee ရှိသည့် element အားလုံးကို ရွေးချယ်ပါမည်။
ထိုကွာခြားချက်ကို ခံစားနားလည်ပါ။
အောက်ဖော်ပြပါ ကုဒ်ရှိ selector သည် ဘာကို ရွေးချယ်သည်ကို ရှင်းပြပါ။ ထို့နောက် ထို selector နှင့် ကိုက်ညီသော HTML ကုဒ်ကို ရေးပါ။ Selector ပါသော ကုဒ်မှာ-
p.bbb {
color: red;
}
အောက်ဖော်ပြပါ ကုဒ်ရှိ selector သည် ဘာကို ရွေးချယ်သည်ကို ရှင်းပြပါ။ ထို့နောက် ထို selector နှင့် ကိုက်ညီသော HTML ကုဒ်ကို ရေးပါ။ Selector ပါသော ကုဒ်မှာ-
p .bbb {
color: red;
}
အောက်ဖော်ပြပါ ကုဒ်ရှိ selector သည် ဘာကို ရွေးချယ်သည်ကို ရှင်းပြပါ။ ထို့နောက် ထို selector နှင့် ကိုက်ညီသော HTML ကုဒ်ကို ရေးပါ။ Selector ပါသော ကုဒ်မှာ-
.eee p.bbb {
color: red;
}
အောက်ဖော်ပြပါ ကုဒ်ရှိ selector သည် ဘာကို ရွေးချယ်သည်ကို ရှင်းပြပါ။ ထို့နောက် ထို selector နှင့် ကိုက်ညီသော HTML ကုဒ်ကို ရေးပါ။ Selector ပါသော ကုဒ်မှာ-
.eee p .bbb {
color: red;
}