CSS တွင် selector အများအပြားကို ဆက်စပ်ရေးသားခြင်း

Element တစ်ခုသည် selector အများအပြားနှင့် တစ်ပြိုင်နက် ကိုက်ညီမှုရှိမရှိ ရွေးချယ်ရန် ထို selector များကို ကြားတွင် နေရာလပ်မထားဘဲ ဆက်စပ်ရေးသားရပါမည်။

ဥပမာအားဖြင့်၊ အောက်ပါ selector သည် class bbb နှင့် class zzz နှစ်ခုလုံးရှိသော element ကို ရွေးချယ်ပါမည်:

css.bbb.zzz {
  
}

ထို့အတူ အောက်ပါ selector သည် class bbb နှင့် class zzz နှစ်ခုလုံးရှိသော ခေါင်းစဉ် h2 element ကို ရွေးချယ်ပါမည်:

cssh2.bbb.zzz {
  
}

ဖော်ပြပါနည်းလမ်းအတိုင်း selector များ၏ မည်သည့်ပုံစံကိုမဆို တည်ဆောက်နိုင်ပါသည်။ ဤတွင် အသုံးပြုထားသော selector များ၏ အစဉ်လိုက်သည် အရေးမကြီးပါ။ tag selector များကို အစဦးပိုင်းတွင်သာ ထားရမည်ဟူသော စည်းမျဉ်းကိုလွဲ၍ ဖြစ်သည်။

ဆိုလိုသည်မှာ ဥပမာ၊ selector များ .bbb.zzz နှင့် .zzz.bbb တို့သည် လုံးဝတူညီပါသည်။

ထို့အပြင်၊ id ကို အသုံးပြု၍ selector များကို ဖွဲ့စည်းနိုင်ပါသည်။ ဥပမာ: #elem.eee၊ သို့မဟုတ် h2#elem.eee၊ သို့မဟုတ် h2.eee#elem စသဖြင့်ဖြစ်သည်။

Задание 1

အောက်တွင် ဖော်ပြထားသော ကုဒ်ရှိ selector သည် မည်သည့်အရာကို ရွေးချယ်သည်ကို ရှင်းပြပါ။ ထို့နောက် ထို selector နှင့် ကိုက်ညီသော HTML ကုဒ်ကို ရေးပါ။ Selector ပါသော ကုဒ်မှာ အောက်ပါအတိုင်းဖြစ်သည်:

css.bbb.zzz {
  color: red;
}
Задание 2

အောက်တွင် ဖော်ပြထားသော ကုဒ်ရှိ selector သည် မည်သည့်အရာကို ရွေးချယ်သည်ကို ရှင်းပြပါ။ ထို့နောက် ထို selector နှင့် ကိုက်ညီသော HTML ကုဒ်ကို ရေးပါ။ Selector ပါသော ကုဒ်မှာ အောက်ပါအတိုင်းဖြစ်သည်:

cssh2.bbb.zzz {
  color: red;
}
Задание 3

အောက်တွင် ဖော်ပြထားသော ကုဒ်ရှိ selector သည် မည်သည့်အရာကို ရွေးချယ်သည်ကို ရှင်းပြပါ။ ထို့နောက် ထို selector နှင့် ကိုက်ညီသော HTML ကုဒ်ကို ရေးပါ။ Selector ပါသော ကုဒ်မှာ အောက်ပါအတိုင်းဖြစ်သည်:

css#elem.bbb {
  color: red;
}
Задание 4

အောက်တွင် ဖော်ပြထားသော ကုဒ်ရှိ selector သည် မည်သည့်အရာကို ရွေးချယ်သည်ကို ရှင်းပြပါ။ ထို့နောက် ထို selector နှင့် ကိုက်ညီသော HTML ကုဒ်ကို ရေးပါ။ Selector ပါသော ကုဒ်မှာ အောက်ပါအတိုင်းဖြစ်သည်:

css#elem.bbb.zzz {
  color: red;
}
Задание 5

အောက်တွင် ဖော်ပြထားသော ကုဒ်ရှိ selector သည် မည်သည့်အရာကို ရွေးချယ်သည်ကို ရှင်းပြပါ။ ထို့နောက် ထို selector နှင့် ကိုက်ညီသော HTML ကုဒ်ကို ရေးပါ။ Selector ပါသော ကုဒ်မှာ အောက်ပါအတိုင်းဖြစ်သည်:

cssh2#elem.bbb {
  color: red;
}