CSS အကျုံးစား အကြောင်း

သင်္ဂြိုလ် ဖြစ်သော အကိုင်း အချက်အလက် အား ပြင်ဆင်ထားသော အကိုင်း အချက်အလက် ကြိုးပမ်းပါ။

သင်္ဂြိုလ် ဖြစ်သော အကိုင်း အချက်အလက် နှင့် အကိုင်း အမှုံး ကို ပြင်ဆင်ထားသော အအုပ်အုံ အုံအုံ ကို ကြိုးပမ်းပါ။

စတွဲ [attribute] အကွက်

[attribute] ရှာဖွေသူ သည် အကိုင်း ပါဝင်သော အကိုင်း ကို ရှာဖွေရန် အသုံးပြုပါ။

အထူးအရာ အမှတ်အသား သည် target အကိုင်း ပါဝင်သော အအုပ်အုံ a အား ရှာဖွေပါ။

အကျိုးသတ္တုအချက်

a[target] {
  background-color: yellow;
}

ကျယ်ပ်ခြင်း

CSS [attribute="value"] ရှာဖွေသူ

[attribute="value"] ရှာဖွေသူ သည် အကိုင်း နှင့် အမှုံး ပါဝင်သော အကိုင်း ကို ရှာဖွေရန် အသုံးပြုပါ။

အထူးအရာ အမှတ်အသား သည် target="_blank" အကိုင်း ပါဝင်သော အအုပ်အုံ a ကို ရှာဖွေပါ။

အကျိုးသတ္တုအချက်

a[target="_blank"] { 
  background-color: yellow;
}

ကျယ်ပ်ခြင်း

CSS [attribute~="value"] ရှာဖွေသူ

[attribute~="value"] ရှာဖွေသူ သည် အကိုင်း အမှုံး တွင် အမှုံး ကို ပါဝင်သော အအုပ်အုံ ကို ရှာဖွေရန် အသုံးပြုပါ။

အထူးအရာ အမှတ်အသား သည် title အကိုင်း တွင် "flower" သာသာ ပါသော အအုပ်အုံ အား ရှာဖွေပါ။

အကျိုးသတ္တုအချက်

[title~="flower"] {
  border: 5px solid yellow;
}

ကျယ်ပ်ခြင်း

အထူးအရာ အမှတ်အသား သည် အောက်ပါ အကိုင်း ကို ကိုက်နှက်ပါ၊ title="flower" သို့မဟုတ် title="summer flower" သို့မဟုတ် title="flower new" နှင့် မသက်ဆိုသော အကိုင်းမှာ title="my-flower" သို့မဟုတ် title="flowers" အား မကိုက်နှက်ပါ။

CSS [attribute|="value"] ရှာဖွေသူ

[attribute|="value"] ရှာဖွေသူ သည် အကိုင်းသို့ သတ်မှတ်ထားသော အကိုယ်ရိုး နှင့် အမှုံး မှ စတင်သော အအုပ်အုံ ကို ရှာဖွေရန် အသုံးပြုပါ။

အချက်ခံရသည်။

ထင်ရှားချက်：အမှုံး သည် ပုံစံ အား ဖွင့်လှစ်ခြင်း သို့မဟုတ် ကိုယ်စားပြုထားသော အသုံးပြု သည်၊ ဥပမာ class="top" သို့မဟုတ် ခြိမ်းခြောက် နေသော class="top-text" အသုံးပြုပါ။

အကျိုးသတ္တုအချက်

[class|="top"] {
  background: yellow;
}

ကျယ်ပ်ခြင်း

CSS [attribute^="value"] အကိုးးအား

[attribute^="value"] အကိုးးအား အကိုးးအား ပါဝင်သော အကိုးးအား အပြောင်းတိုင်း ကို ရယူရသည်။

အချက်ခံရသည်။

အဆိုပါအကိုးးအား အပိုင်းအခြားမပါဘဲ အကိုးးအား ပါဝင်သည်။

အကျိုးသတ္တုအချက်

[class^="top"] {
  background: yellow;
}

ကျယ်ပ်ခြင်း

CSS [attribute$="value"] အကိုးးအား

[attribute$="value"] အကိုးးအား အကိုးးအား ပါဝင်သော အကိုးးအား အပြောင်းတိုင်း ကို ရယူရသည်။

အချက်ခံရသည်။

အဆိုပါအကိုးးအား အပိုင်းအခြားမပါဘဲ အကိုးးအား ပါဝင်သည်။

အကျိုးသတ္တုအချက်

[class$="test"] {
  background: yellow;
}

ကျယ်ပ်ခြင်း

CSS [attribute*="value"] အကိုးးအား

[attribute*="value"] အကိုးးအား အကိုးးအား ပါဝင်သော အချက် ကို ရယူရသည်။

အချက်ခံရသည်။

အဆိုပါအကိုးးအား အပိုင်းအခြားမပါဘဲ အကိုးးအား ပါဝင်သည်။

အကျိုးသတ္တုအချက်

[class*="te"] {
  background: yellow;
}

ကျယ်ပ်ခြင်း

ပြည့်ပြီးအချက်ခံရသည်။

အချက်ခံရသည့်အသုံးချက်အချက်ခံရသည်။

အကျိုးသတ္တုအချက်

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}
input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

ကျယ်ပ်ခြင်း

အဆိုပါကျယ်ပ်ခြင်း CSS ပညာရှိရန်CSS ပညာရှိရန် အချက်ခံရသည်။

အချက်ခံရသည့်အသုံးချက်အချက်ခံရသည်။

အကိုးးအား အကျိုးသတ္တုအချက် အကျိုးသတ္တုသုံး
[attribute] [target] target အကိုးးအား ပါဝင်သောအချက် အချက်ခံရသည်။
[attribute=value] [target=_blank] target="_blank" အကိုးးအား ပါဝင်သောအချက် အချက်ခံရသည်။
[attribute~=value] [title~=flower] အကိုးးအား "flower" အလို့ငှာ ပါဝင်သောအချက် အချက်ခံရသည်။
[attribute|=value] [lang|=en] အကိုးးအား "en" အစတွင်းရှိသောအချက် ပါဝင်သောအချက်ခံရသည်။
[attribute^=value] a[href^="https"] ကျယ်ပ်သည့် href အကိုးးအား "https" အစတွင်းရှိသောအချက် <a> အချက်ခံရသည်။
[attribute$=value] a[href$=".pdf"] ကျယ်ပ်သည့် href အကိုးးအား ".pdf" အပြောင်းတိုင်း ရှိသောအချက် <a> အချက်ခံရသည်။
[attribute*=value] a[href*="codew3c"] 选择其 href 属性值包含子串 "codew3c" 的每个 元素。

延伸阅读

课外书：စတွဲ အချက်အလက်