CSS စာရင်းသုံးစံရေး ရှာဖွေသူ

CSS စာရင်းသုံးစံရေး ရှာဖွေသူ

CSS ရှာဖွေက်လှန်းသူများ က စက်တင်ကို “ရှာဖွေ” (သို့မဟုတ် ရွေးချယ်) ရန် အသုံးပြုသည်

ကျွန်တော် မှာ CSS ရှာဖွေက်လှန်းသူများ ၅ မျိုး ကို ခွဲခြားနိုင်ပါသည်

ဒီ စာမျက်နှာ က အကြောင်းအရာ အနည်းဆုံး စက်တင် CSS ရှာဖွေက်လှန်းသူများ ကို ဖော်ပြပါသည်။

CSS 元素选择器

元素选择器根据元素名称来选择 HTML 元素。

အကြောင်းအရာ

在这里，页面上的所有

元素都将居中对齐，并带有红色文本颜色：

p {
  text-align: center;
  color: red;
}

သင့်ကို စစ်ဆေးပါ။

CSS id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

အကြောင်းအရာ

这条 CSS 规则将应用于 id="para1" 的 HTML 元素：

#para1 {
  text-align: center;
  color: red;
}

သင့်ကို စစ်ဆေးပါ။

မှတ်ချက်:id အမည် ကို နှစ်ပုံစံ မပြောင်းလဲချေ။

CSS အမည်အရာ ရှာဖွေသူ

အမည်အရာ ရှာဖွေသူ ကို အသုံးပြုပါက အရာရာပွဲများအား နှစ်ပုံစံ အသုံးပြုပါသည်။

အရာရာပွဲကို ရှာဖွေရန် အကွယ်အရာ ကို အသုံးပြုပါက အပေါ်တွင် အမည်အရာ ကို အသုံးပြုပါ။

အကြောင်းအရာ

အကြောင်းအရာ တွင် class="center" ဖြစ်သော အရာရာပွဲများအား အသုံးပြုပါက အသားအရောင် အဖြူ နှင့် စတင်ရွှေ့စိုက်စေပါလိမ့်မည်။

.center {
  text-align: center;
  color: red;
}

သင့်ကို စစ်ဆေးပါ။

သို့သော် သာသာရွှေ့စိုက်ပါက အသုံးပြုရန် အသိအမှတ်ပြုပါလိမ့်မည်။

အကြောင်းအရာ

အကြောင်းအရာ တွင် class="center" ဖြစ်သော <p> အား သာသာရွှေ့စိုက်စေပါလိမ့်မည်။

p.center {
  text-align: center;
  color: red;
}

သင့်ကို စစ်ဆေးပါ။

HTML အရာရာပွဲများကို အသုံးပြုပါက နှစ်ပုံစံ အသုံးပြုနိုင်ပါသည်။

အကြောင်းအရာ

အကြောင်းအရာ တွင် <p> အား class="center" နှင့် class="large" ကို အသုံးပြုပါက အေျာင်ချမ်းသားပါလိမ့်မည်။

<p class="center large">အဆိုပါ အကြောင်းအရာက နှစ်ပုံစံ အသုံးပြုပါသည်。</p>

သင့်ကို စစ်ဆေးပါ။

မှတ်ချက်:အမည်အရာ ကို နှစ်ပုံစံ မပြောင်းလဲချေ။

CSS အရာရာပွဲ အသုံးပြုသူ

အရာရာပွဲအား ပုံနှိပ်ပါက အရာရာပွဲများအား အသုံးပြုပါသည်။

အကြောင်းအရာ

အောက်တွင် ရှိသော CSS ကုက္ခတ်တား ကို ပုံနှိပ်ပါက အခြား အရာရာပွဲများအား အသုံးပြုပါလိမ့်မည်။

* {
  text-align: center;
  color: blue;
}

သင့်ကို စစ်ဆေးပါ။

CSS အုပ်စုပြုရှာဖွေသူ

အုပ်စုပြုရှာဖွေသူ ကို အသုံးပြုပါက အတူတူ အေျာင်ချမ်းသားခြင်း ဖြစ်သော HTML အရာရာပွဲများကို ရှာနိုင်ပါသည်။

အောက်တွင် ရှိသော CSS ကုက္ခတ်တား ကို ကြည့်ပါ (h1, h2 နှင့် p အား အတူတူ အေျာင်ချမ်းသားခြင်း ဖြစ်သည်)။

h1 {
  text-align: center;
  color: red;
}
h2 {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}

အုပ်စုပြုပါက အကျယ်အဝန်းရှိ ကုက္ခတ်တား ကို လျော့နည်းစေပါလိမ့်မည်။

ရှာဖွေသူများကို အုပ်စုပြုရန် ကိုယ်တိုင် ကူးကွဲပါ။

အကြောင်းအရာ

အမှတ်သား အကြောင်းအရာတွင် အပေါ်တွင် ရှိသော ရှာဖွေသူများကို အုပ်စုပြုပါ။

h1, h2, p {
  text-align: center;
  color: red;
}

သင့်ကို စစ်ဆေးပါ။

အကျယ်အဝန်းရှိ အကျယ်အဝန်းရှိ CSS ရှာဖွေသူ

ရှာဖွေသူ အကြောင်းအရာ အကြောင်းအရာ
.class .intro အရာရာပွဲအား အသုံးပြုပါ။
#id #firstname 选取 id="firstname" 的那个元素。
* * 选取所有元素。
element p 选取所有

元素。
element,element,.. div, p 选取所有
元素和所有

元素。

延伸阅读

课外书：CSS 元素选择器

课外书：CSS 选择器分组

课外书：CSS 类选择器详解

课外书：CSS ID 选择器详解

课外书：CSS 属性选择器详解

课外书：CSS 后代选择器

课外书：CSS 子元素选择器

课外书：CSS 相邻兄弟选择器