ရှုပ်ထွေးသော CSS selector များကို စုစည်းရာတွင် မှားယွင်းမှု

စုစည်းရာတွင် ကော်မာဖြင့် ခွဲထားသည့် အရာအားလုံးသည် ပြည့်စုံသော selector တစ်ခုဖြစ်ရန် လိုအပ်ပါသည်။ ဤနေရာတွင် မည်သည့်နေရာတွင် အမှားဖြစ်နိုင်သည်ကို ကြည့်ရှုကြပါစို့။

ကျွန်ုပ်တို့တွင် ဤကဲ့သို့သော ကုဒ်ရှိသည်ဆိုပါစို့။

#block h2 {
	color: red;
}
#block h3 {
	color: red;
}

selector နှစ်ခုကို တစ်ခုတည်းသို့ စုစည်းကြပါစို့။ ဤသည်မှာ မှန်ကန်သော စုစည်းခြင်း ပုံစံဖြစ်ပါသည်။

#block h2, #block h3 {
	color: red;
}

ဤသည်မှာ မှားယွင်းသော စုစည်းခြင်း ပုံစံဖြစ်ပါသည်။

#block h2, h3 {
	color: red;
}

ဤမှားယွင်းသော စုစည်းခြင်းပုံစံတွင် အစတန်းသုံးသူများက မည်သည့်အကြောင်းကြောင့်များ #block သည် h2 နှင့် ကော်မာနောက်ရှိ h3 နှစ်ခုလုံးနှင့် သက်ဆိုင်သည်ဟု ထင်ကြပါသနည်း။ သို့သော် selector များသည် ကော်မာမှတစ်ဆင့် သက်ရောက်မှုမရှိပါ။ ဤမှားယွင်းသော စုစည်းခြင်း ပုံစံကို အတိအကျ ဤသို့ ပြန်ရေးနိုင်ပါသည်။

#block h2 {
	color: red;
}
h3 {
	color: red;
}

ကျွန်ုပ်တို့ စတင်ရိုးချုံးခဲ့သော မူလပုံစံနှင့် နှိုင်းယှဉ်ကြည့်ပါ။

#block h2 {
	color: red;
}
#block h3 {
	color: red;
}

Selector များကို စုစည်းခြင်းကို အသုံးပြု၍ ကုဒ်ကို ရိုးချုံးပါ။

#block h1 {
	text-align: center;
}
#block h2 {
	text-align: center;
	color: blue;
}
#block h3 {
	text-align: center;
	font-size: 16px;
	color: red;
}

Selector များကို စုစည်းခြင်းကို အသုံးပြု၍ ကုဒ်ကို ရိုးချုံးပါ။

#block h1.eee {
	text-align: center;
	font-size: 30px;
}
#block h2.zzz {
	text-align: center;
	font-size: 20px;
}

Selector များကို စုစည်းခြင်းကို အသုံးပြု၍ ကုဒ်ကို ရိုးချုံးပါ။

.xxx .kkk {
	text-align: center;
}
.eee h2.zzz {
	text-align: center;
}
#eee h2 {
	text-align: center;
}

Selector များကို စုစည်းခြင်းကို အသုံးပြု၍ ကုဒ်ကို ရိုးချုံးပါ။

.eee h2.zzz {
	text-align: center;
}
.xxx {
	text-align: center;
}