CSS အက်ဥပဒေ ရွေးချယ်သည် အသိပ်သိပ်

CSS 2 တွင် အချက်အလက် ခွဲခြားပါသည်။

အချက်အလက် ခွဲခြားပြီး အချက်အလက် အသုံးပြုပါ အရာအား ရွေးချယ်ရန် အချက်အလက် ခွဲခြားပါ။

အချက်အလက် အသုံးပြုပါ

အချက်အလက် တစ်ခုကို ရွေးချယ်ရန် အချက်အလက် အသုံးပြုပါ။

အမှတ် 1

အသုံးပြုရန် အချက်အလက် ကို အစိတ်အခမ်း (title) ပါသော အရာအား အပိုမို အနီဆိုးခြင်း ပြုရန် ရေးသားပါ။

*[title] {color:red;}

ကိုယ်တိုင် ကြိုးစားလုပ်ချင်ပါတယ်

အမှတ် 2

အထက်တွင် အတူတူပြီး ရေးသားရန် href အချက်အလက် ဖြင့် အစိတ်အခမ်း (a အရာ) အတွက် အေျာင်ဆက်ပါ။

a[href] {color:red;}

ကိုယ်တိုင် ကြိုးစားလုပ်ချင်ပါတယ်

例子 3

အချက်အလက်များအားဖြင့် ရွေးချယ်ရန် အလိုရှိသော် အချက်အလက် ခွဲခြားပြီး ဆက်သွယ်ပါ။

例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：

a[href][title] {color:red;}

ကိုယ်တိုင် ကြိုးစားလုပ်ချင်ပါတယ်

例子 4

可以采用一些创造性的方法使用这个特性。

例如，可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像：

img[alt] {border: 5px solid red;}

ကိုယ်တိုင် ကြိုးစားလုပ်ချင်ပါတယ်

အကြောင်းကြားချက်အထက်အရာမှ ပြောကြားထားသော အခွင့်အရေး အသုံးပြုခြင်း အများအားဖြင့် အကျိုးသက်ရှိသော ပြုပြင်ခြင်း အားဖြင့် အကျိုးသက်ရှိသော အကျိုးသက်ရှိသော ပြုပြင်ခြင်း ဖြစ်သည်။

ဥပမာ 5: အရာဝတ္တု စာရင်းများ အတွက် အခွင့်အရေး ကို ရွေးချယ်

အခွင့်အရေး ကို ရှာဖွေသော အခွင့်အရေးကို အရာဝတ္တု စာရင်းများတွင် အသုံးပြုခြင်း အနှစ်တရား ဖြစ်သည်။

ဥပမာ၊ အရှင် အမေရိကန် ပြည်ထောင်စု အခြေခံ သတ္တုပတ္တိများ အတွက် အရာဝတ္တု စာရင်းကို ဖွဲ့စည်းထားခဲ့သည်ကို သိရှိရာတွင် ဝီကီ ဆိုင်ငံတကာ အခြေခံ သတ္တုပတ္တိများ အတွက် ဝီကီ ဆိုင်ငံတကာ အခြေခံ သတ္တုပတ္တိများ အတွက် အခွင့်အရေးကို ရှာဖွေသင့်သည်ကို အသိအမှတ်ပြုရန် ထိုသို့အသုံးပြုနိုင်ပါသည်။

planet[moons] {color:red;}

ဤလက်တင်းအရာများတွင် ဒုတိယနှင့် တတိယပေါင်းကွန်းချိန်းများ၏ စကားလုံးကို ခုနစ်ရောင်ရှိစေသည်၊ သို့သော် ပထမပေါင်းကွန်းချိန်း၏ စကားလုံးမှာ ခုနစ်ရောင်မရှိပါ။

Venus
moons="1">Earth
moons="2">Mars</planet>

查看效果

အခွင့်အရေး အတ္ထုပ္ပတ္တိ အခြေခံအားဖြင့် ရွေးချယ်

အခွင့်အရေးကို ရှာဖွေသော အခွင့်အရေးများကို ပိုမိုသိပေးရန် အချက်အလက်ကို သာလျှင် ရွေးချယ်နိုင်ပါသည်။

အမှတ် 1

ဥပမာ၊ ဝီကီ ဆိုင်ငံတကာ ဝန်ကြီးဌာနတွင် သတ္တုပတ္တိကို အခြေခံပြီး အချက်အလက်ကို အမြင့်ကို ရှာဖွေသင့်သည်ကို သိရှိရာတွင် ထိုသို့ဖြစ်သည်ကို အသိအမှတ်ပြုရန် ထိုသို့အသုံးပြုနိုင်ပါသည်။

a[href="http://www.codew3c.com/about_us.asp"] {color: red;}

ကိုယ်တိုင် ကြိုးစားလုပ်ချင်ပါတယ်

အမှတ် 2

လက်ရှိအစိုးရက်သုံးစားအရ အချို့သော အခွင့်အရေး-အတ္ထုပ္ပတ္တိ ကို ဆက်လက်ချိတ်ဆက်ခြင်းဖြင့် အချက်အလက်တစ်ခုကို ရွေးချယ်နိုင်ပါသည်。

a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}

ဤလက်တင်းအရာများတွင် ပထမပေါင်းကွန်းချိန်းကို ခုနစ်ရောင်ရှိစေသည်၊ သို့သော် ဒုတိယသို့မဟုတ် တတိယကွန်းချိန်းမှာ ခုနစ်ရောင်မရှိပါ။

<a href="http://www.codew3c.com/" title="W3School">W3School</a>
<a href="http://www.codew3c.com/css/" title="CSS">CSS</a>
<a href="http://www.codew3c.com/html/" title="HTML">HTML</a>

ကိုယ်တိုင် ကြိုးစားလုပ်ချင်ပါတယ်

例子 3

同样地，XML 语言也可以利用这种方法来设置样式。

下面我们再回到行星那个例子中。假设只希望选择 moons 属性值为 1 的那些 planet 元素：

planet[moons="1"] {color: red;}

上面的代码会把以下标记中的第二个元素变成红色，但第一个和第三个元素不受影响：

Venus
moons="1">Earth
Mars

查看效果

属性与属性值必须完全匹配

请注意，这种格式要求必须与属性值完全匹配。

如果属性值包含用空格分隔的值列表，匹配就可能出问题。

အချက်အလက်အချက်အလက်ကို ကျွန်ုပ်အား သဘောပေါက်စေအပ်ပါ။

<p class="important warning">This paragraph is a very important warning.</p>

အချက်အလက်ကို p[class="important"] အဖြစ် ရေးသားခဲ့ချင်း ထို့ကြောင့် အမှတ်သားပုံစံကို မတွေ့နိုင်ပါ။

အချက်အလက်အမှတ်သားကို ရွေးချယ်ရန် လိုအပ်သော အချက်အလက်ကို ရေးသားရန် လိုပါသည်။

p[class="important warning"] {color: red;}

ကိုယ်တိုင် ကြိုးစားလုပ်ချင်ပါတယ်

အချက်အလက်အစိတ်အပိုင်းအချက်အလက်

အချက်အလက်အမှတ်သားများတွင် အချက်အလက်များ၏ လိုချင်သော စကားလုံးကို ရွေးချယ်ရန် ဝက်ကြောင်းကို အသုံးပြုရန် လိုပါသည်။

class အချက်အလက်မှာ important ပါဝင်သော အရာတွေကို ရွေးချယ်ရန် အောင် အချက်အလက်ကို အသုံးပြုနိုင်ပါသည်။

p[class~="important"] {color: red;}

ကိုယ်တိုင် ကြိုးစားလုပ်ချင်ပါတယ်

အဆိုပါ ဝက်ကြောင်းကို လျှောက်ခဲ့ခြင်း အချိန်တွင် အပြည့်အဝင် အချက်အလက်များ ပါဝင်သည်ဟု ဆိုသည်။

အချက်အလက်အစိတ်အပိုင်းအချက်အလက်ကို အစိတ်အပိုင်း class အမည်ချင်းချင်း ကွဲပြားခြင်း

ထိုအချက်အလက်သည် ကိုယ်စားပြု class အချက်အလက်များတွင် အမှတ်သားသုံး class အမည်ချင်းကို အစိုးရပါသည်။

ထို့ကြောင့် p.important နှင့် p[class="important"] တို့သည် HTML ပုံပြင်အား အမျိုးအမည်း ဖြစ်ပါသည်။

ထို့ကြောင့် "~=" အချက်အလက်ကို အသုံးပြုရသည်ဟာ သာမန် class အပါအဝင် အချက်အလက်တိုင်း အသုံးပြုနိုင်ပါသည်။

အချက်အလက်များအများပြားရှိသော ပုံပြင်တစ်ခု အနေဖြင့် ပုံများသာ တစ်စိတ်တစ်ဒေသသာ ပုံတွေဖြစ်တဲ့ပါ။ ထို့အတွက် တိုက်ရိုက် title ပုံပြင်၏ အချက်အလက်များမှာ အစိုးရအား ရွေးချယ်ရန် အသုံးပြုနိုင်ပါ။

img[title~="Figure"] {border: 1px solid gray;}

这个规则会选择 title 文本包含 "Figure" 的所有图像。没有 title 属性或者 title 属性中不包含 "Figure" 的图像都不会匹配。

ကိုယ်တိုင် ကြိုးစားလုပ်ချင်ပါတယ်

子串匹配属性选择器

下面为您介绍一个更高级的选择器模块，它是 CSS2 完成之后发布的，其中包含了更多的部分值属性选择器。按照规范的说法，应该称之为“子串匹配属性选择器”。

很多现代浏览器都支持这些选择器，包括 IE7。

下表是对这些选择器的简单总结：

类型 描述
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素

可以想到，这些选择有很多用途。

举例来说，如果希望对指向 CodeW3C.com 的所有链接应用样式，不必为所有这些链接指定 class，再根据这个类编写样式，而只需编写以下规则：

a[href*="codew3c.com"] {color: red;}

ကိုယ်တိုင် ကြိုးစားလုပ်ချင်ပါတယ်

အကြောင်းကြားချက်အခြေခံ အကျိုးသုံးစံများ အား အသုံးပြုနိုင်သော အခြေခံ အကျိုးသုံးစံများ

ဖော်ပြချက်

နောက်ပိုင်းတွင် ဖော်ပြပါ ဖြစ်သည် သို့မဟုတ် အသုံးပြုနိုင်သော အခြေခံ အကျိုးသုံးစံများ အား ဖော်ပြပါတယ်

*[lang|="en"] {color: red;}

အထက်အချက်အလက် အရ အခြေခံ lang အကျိုးသုံးစံ အား en သို့မဟုတ် en- ဖြင့် စတင်သော အခြေခံ အသုံးပြုနိုင်သော အရာတွေ အား ရွေးချယ်လိုက်သည်။ အထူးသဖြင့် ထိုအရာတွေ အား အသုံးပြုသော အချက်အလက် အခါ အထူးသဖြင့် နောက်ဆုံး နှစ်ခု အား ရွေးချယ်လိုက်လိမ့်မည်

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-<p lang="au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

ကိုယ်တိုင် ကြိုးစားလုပ်ချင်ပါတယ်

ပုံစံအား အသုံးပြုရာ၌ အသုံးပြုနိုင်သော [att|="val"] သည် တခုခု သို့မဟုတ် အသုံးပြုနိုင်သော အသုံးပြုနိုင်ပါတယ်

HTML စာသင်္ကြပ် တစ်ခု တွင် ရုပ်ပုံ အစုအဝေး တစ်ခု ရှိပြီး ရုပ်ပုံ တခုခု ရှိသော ဖိုင်အမည် သည် အသုံးပြုနေသော အုပ်စံ တခု ဖြစ်သည် figure-1.jpg နှင့် figure-2.jpg၌ ထိုအရာတွေ အား သတ်မှတ်နိုင်သော ရှာဖွေသူများ ကို အသုံးပြုနိုင်ပါတယ်

img[src|="figure"] {border: 1px solid gray;}

ကိုယ်တိုင် ကြိုးစားလုပ်ချင်ပါတယ်

မှားမဟုတ်၊ ဒါဟာ အသုံးပြုကြသော အကျိုးသုံးစံသတ်မှတ်သူ အများဆုံး သည် စကားလုံး သတ်မှတ်ခြင်း ဖြစ်သည်။

CSS 选择器参考手册

选择器 描述
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] အချက်အလက် အကြောင်း