CSS တွင် ခြွင်းချက်စည်းမျဉ်းများ

ယခင်ဥပမာတွင် selector နှစ်ခုစလုံးသည်တူညီပြီးတူညီသောအဦးအစဉ်အနေအထားရှိခဲ့သည်။ ဆိုလိုသည်မှာေအာက်ေပးထားသော property ကသာအနိုင်ရမည်ဖြစ်သည်။

စာမျက်နှာရှိ element တစ်ခုသည် selector အမျိုးမျိုးနှင့် ကိုက်ညီသည့်အခြေအနေများလည်းရှိပါသည်။ ထိုသို့ေသာအခါ property များတိုက်ဆိုင်ပါက ပို၍ခြွင်းချက်ကြီးသော၊ ဆိုလိုသည်မှာ ပို၍တိကျသော selector ကအနိုင်ရပါမည်။ ခြွင်းချက်စည်းမျဉ်းများကို ကြည့်ရအောင်။

ပထမစည်းမျဉ်း

class သည်အမြဲတမ်း tag selector ကို အနိုင်ရသည်။

html<p class="text">text</p>

cssp {
  color: red;
}
.text {
  color: green; /* ဤအရောင်ကို အသုံးပြုမည် */
}

Результат:

ဒုတိယစည်းမျဉ်း

ID သည်အမြဲတမ်း class ကို အနိုင်ရသည်။

html<p id="elem" class="text">text</p>

css.text {
  color: red;
}
#elem {
  color: green; /* ဤအရောင်ကို အသုံးပြုမည် */
}

Результат:

တတိယစည်းမျဉ်း

တူညီသောအခြေအနေများတွင် အစိတ်အပိုင်းများစွာပါသည့် selector ကအနိုင်ရသည်။ ဥပမာ tag selector နှစ်ခုရှိပါက tag များစွာပါသည့် selector ကအနိုင်ရမည်။

html<div>
  <p>text</p>
</div>

cssp {
  color: red;
}
div p {
  color: green; /* ဤအရောင်ကို အသုံးပြုမည် */
}

Результат:

class နှစ်ခုရှိပါက class များစွာအသုံးပြုထားသည့် selector ကအနိုင်ရမည် (အကယ်၍ tag selector များပါဝင်နေပါက ၎င်းတို့သည်အကျိုးသက်ရောက်မှုမရှိပါ)။

html<div class="block">
  <p class="text">text</p>
</div>

css.text {
  color: red;
}
.block .text {
  color: green; /* ဤအရောင်ကို အသုံးပြုမည် */
}

Результат: