[屬性選擇器] Attribute selectors
属性选择器早在CSS2中就被引入了，其主要作用就是对带有指定属性的HTML 元素设置样式。
使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。
IE6幾乎都不支持(支援CSS2以上)
假設html如下
<div></div>
<from>
<input type="text" value="name" placeholder="name"><br>
<input type="text" value="name2" placeholder="name-2"><br>
<input type="text" value="email" placeholder="email name"><br>
<input type="text" value="phone" placeholder=""><br>
<input type="text" value="no placeholder" ><br>
<span for="checkbox_1">A</span>
<input id="checkbox_1" type="checkbox" value="1" checked >
<span for="checkbox_2">B</span>
<input id="checkbox_2" type="checkbox" value="0" >
<br>
<span for="radio_box_1">Yes</span>
<input id="radio_box_1" type="radio" value="1" checked >
<span for="radio_box_2">No</span>
<input id="radio_box_2" type="radio" value="0" >
</from>
| 宣告方式 | 說明 | CSS版本 | 範例 |
|---|---|---|---|
E[attr] |
指定E元素中含有属性名 | CSS 2 | input[placeholder] {color:red;} |
E[attr="value"] |
指定E元素中含有属性名與等於值 | CSS 2 | input[type="text"] {color:red;} |
E[attr~="value"] |
指定属性名且含有詞 | CSS 2 | input[placeholder~="name"] {margin:10px;} |
E[attr*="value"] |
指定属性名且含有詞 | CSS 2 | input[id*="box"] {margin:10px;} |
E[attr^="value"] |
指定E元素中含有属性名，且值為指定開頭 | CSS 3 | span[for^="radio_box"]{margin:10px;} |
E[attr$="value"] |
指定E元素中含有属性名，且值為指定結尾 | CSS 3 | span[for$="box_1"]{color:red;} |
| 如下 | 指定E元素中含有属性名，且值為指定開頭(value-)或含有值(~) | CSS 2 | 如下 |
E[attr|="value"]
範例:
input[placeholder|="name"]{color:red;}
html:
<a href="http://google.com">Link0</a>
<a href="http://google.com" class="links item" title="open the web">Link1</a>
<a href="http://google.com" class="links item" title="link2">Link2</a>
<a href="http://google.com" class="links-3 item-3" title="link2page">Link3</a>
E[attr]
如果你希望选择有某个属性的元素，而不论这个属性值是什么，你就可以使用这个属性选择器
/*可以影響Link1,Link2*/ input[title] {color:red;}E[attr="value"]
E[attr="value"]是指定了属性值“value”。而E[attr]只是选择了有对应的属性，并没有明确指其对应的属性值"value"，这也是这两种选择器的最大区是之处。
/*可以影響Link2*/ a[title="link2"] {color:red;}对于E[attr="value"]这种属性值选择器有一点需要注意：属性和属性值必须完全匹配，特别是对于属性值是词列表的形式
/*这是一种写法不能和上面的html所匹配，改成E[attr~=value]才能成功*/
a[class="links"]{color:red};
/*可以影響Link2!这样才是匹配的，记得中间的空格不能少的哟!*/
a[title="open the web"]{color:red};
E[attr~="value"]
如果你想根据属性值中的词列表的某个词来进行选择元素，那么就需要使用这种属性选择器：E[attr~="value"]，
这种属性选择器是属性值是一个或多个词列表，如果是列表时，他们需要用空格隔开，只要属性值中有一个value相匹配就可以选中该元素，
而我们前面所讲的E[attr="value"]是属性值需要完全匹配才会被选中，他们两者区别就是一个有“〜”号，一个没有“〜”号。
属性选择器中有波浪（〜）时属性值有value时就相匹配，没有波浪（〜）时属性值要完全是value时才匹配。
/*可以影響Link1,2!*/
a[class~="item"]{color:red};
E[attr*="value"]
E[attr*="value"]属性选择器表示的是选择attr属性值中包含子串"value"的所有元素。也就是说，只要你所选择的属性，其属性值中有这个"value"值都将被选中
/*可以影響Link2,3!*/
a[title*="link2"]{color:red};
E[attr^="value"]
指的是选择attr属性值以“value”开头的所有元素，换句话说，选择的属性其以对应的属性值是以“value”开始的
/*可以影響Link2,3!*/
a[title^="link2"]{color:red};
E[attr$="value"]
E[attr$="value"]属性选择器刚好与E[attr^="value"]选择器相反，E[attr$="value"]表示的是选择attr属性值以"value"结尾的所有元素，换句话说就是选择元素attr属性，并且他的属性值是以value结尾的，这个运用在给你一些特殊的链接加背景图片很方便的
/*可以影響Link1,2!*/
a[class$="item"]{color:red};
E[attr|="value"]
E[attr|="value"]是属性选择器中的最后一种，在说这个选择器使用之前先提醒大家attr后面的是一个竖线“｜”而不是l，小心搞错了。E[attr|="value"]被称作为特定属性选择器。这个选择器会选择attr属性值等于value或以value-开头的所有元素
/*可以影響Link1,2,3!*/
a[class|="links"]{color:red};
參考
如果您对CSS选择器还不太了解，或者说不太清楚CSS有哪些选择器，个人建议你先阅读以下几篇文章，这样更有助于帮助你阅读本文后面的内容：