CSS 屬性選擇器詳解
CSS 2 引入了屬性選擇器。
屬性選擇器可以根據(jù)元素的屬性及屬性值來選擇元素。
簡單屬性選擇
如果希望選擇有某個(gè)屬性的元素，而不論屬性值是什么，可以使用簡單屬性選擇器。
例子 1
如果您希望把包含標(biāo)題（title）的所有元素變?yōu)榧t色，可以寫作：
*[title] {color:red;}
例子 2
與上面類似，可以只對有 href 屬性的錨（a 元素）應(yīng)用樣式：
a[href] {color:red;}
例子 3
還可以根據(jù)多個(gè)屬性進(jìn)行選擇，只需將屬性選擇器鏈接在一起即可。
例如，為了將同時(shí)有 href 和 title 屬性的 HTML 超鏈接的文本設(shè)置為紅色，可以這樣寫：
a[href][title] {color:red;}
例子 4
可以采用一些創(chuàng)造性的方法使用這個(gè)特性。
例如，可以對所有帶有 alt 屬性的圖像應(yīng)用樣式，從而突出顯示這些有效的圖像：
img[alt] {border: 5px solid red;}
提示：上面這個(gè)特例更適合用來診斷而不是設(shè)計(jì)，即用來確定圖像是否確實(shí)有效。
例子 5：為 XML 文檔使用屬性選擇器
屬性選擇器在 XML 文檔中相當(dāng)有用，因?yàn)?XML 語言主張要針對元素和屬性的用途指定元素名和屬性名。
假設(shè)我們?yōu)槊枋鎏栂敌行窃O(shè)計(jì)了一個(gè) XML 文檔。如果我們想選擇有 moons 屬性的所有 planet 元素，使之顯示為紅色，以便能更關(guān)注有 moons 的行星，就可以這樣寫：
planet[moons] {color:red;}
這會(huì)讓以下標(biāo)記片段中的第二個(gè)和第三個(gè)元素的文本顯示為紅色，但第一個(gè)元素的文本不是紅色：
<planet>Venus</planet> <planet moons="1">Earth</planet> <planet moons="2">Mars</planet>
根據(jù)具體屬性值選擇
除了選擇擁有某些屬性的元素，還可以進(jìn)一步縮小選擇范圍，只選擇有特定屬性值的元素。
例子 1
例如，假設(shè)希望將指向 Web 服務(wù)器上某個(gè)指定文檔的超鏈接變成紅色，可以這樣寫：
a[href="http://www.dbjr.com.cn/about_us.asp"] {color: red;}
例子 2
與簡單屬性選擇器類似，可以把多個(gè)屬性-值選擇器鏈接在一起來選擇一個(gè)文檔。
a[href="http://www.dbjr.com.cn/"][title="W3School"] {color: red;}
這會(huì)把以下標(biāo)記中的第一個(gè)超鏈接的文本變?yōu)榧t色，但是第二個(gè)或第三個(gè)鏈接不受影響：
<a href="http://www.dbjr.com.cn/" title="W3School">W3School</a> <a href="http://www.dbjr.com.cn/css/" title="CSS">CSS</a> <a href="http://www.dbjr.com.cn/html/" title="HTML">HTML</a>
例子 3
同樣地，XML 語言也可以利用這種方法來設(shè)置樣式。
下面我們再回到行星那個(gè)例子中。假設(shè)只希望選擇 moons 屬性值為 1 的那些 planet 元素：
planet[moons="1"] {color: red;}
上面的代碼會(huì)把以下標(biāo)記中的第二個(gè)元素變成紅色，但第一個(gè)和第三個(gè)元素不受影響：
<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>
屬性與屬性值必須完全匹配
請注意，這種格式要求必須與屬性值完全匹配。
如果屬性值包含用空格分隔的值列表，匹配就可能出問題。
請考慮一下的標(biāo)記片段：
<p class="important warning">This paragraph is a very important warning.</p>
如果寫成 p[class="important"]，那么這個(gè)規(guī)則不能匹配示例標(biāo)記。
要根據(jù)具體屬性值來選擇該元素，必須這樣寫：
p[class="important warning"] {color: red;}
根據(jù)部分屬性值選擇
如果需要根據(jù)屬性值中的詞列表的某個(gè)詞進(jìn)行選擇，則需要使用波浪號（~）。
假設(shè)您想選擇 class 屬性中包含 important 的元素，可以用下面這個(gè)選擇器做到這一點(diǎn)：
p[class~="important"] {color: red;}
如果忽略了波浪號，則說明需要完成完全值匹配。
部分值屬性選擇器與點(diǎn)號類名記法的區(qū)別
該選擇器等價(jià)于我們在類選擇器中討論過的點(diǎn)號類名記法。
也就是說，p.important 和 p[class="important"] 應(yīng)用到 HTML 文檔時(shí)是等價(jià)的。
那么，為什么還要有 "~=" 屬性選擇器呢？因?yàn)樗苡糜谌魏螌傩�，而不只�?class。
例如，可以有一個(gè)包含大量圖像的文檔，其中只有一部分是圖片。對此，可以使用一個(gè)基于 title 文檔的部分屬性選擇器，只選擇這些圖片：
img[title~="Figure"] {border: 1px solid gray;}
這個(gè)規(guī)則會(huì)選擇 title 文本包含 "Figure" 的所有圖像。沒有 title 屬性或者 title 屬性中不包含 "Figure" 的圖像都不會(huì)匹配。
子串匹配屬性選擇器
下面為您介紹一個(gè)更高級的選擇器模塊，它是 CSS2 完成之后發(fā)布的，其中包含了更多的部分值屬性選擇器。按照規(guī)范的說法，應(yīng)該稱之為“子串匹配屬性選擇器”。
很多現(xiàn)代瀏覽器都支持這些選擇器，包括 IE7。
下表是對這些選擇器的簡單總結(jié)：
| 類型 | 描述 |
|---|---|
| [abc^="def"] | 選擇 abc 屬性值以 "def" 開頭的所有元素 |
| [abc$="def"] | 選擇 abc 屬性值以 "def" 結(jié)尾的所有元素 |
| [abc*="def"] | 選擇 abc 屬性值中包含子串 "def" 的所有元素 |
可以想到，這些選擇有很多用途。
舉例來說，如果希望對指向 W3School 的所有鏈接應(yīng)用樣式，不必為所有這些鏈接指定 class，再根據(jù)這個(gè)類編寫樣式，而只需編寫以下規(guī)則：
a[href*="jb51.net"] {color: red;}
提示：任何屬性都可以使用這些選擇器。
特定屬性選擇類型
最后為您介紹特定屬性選擇器。請看下面的例子：
*[lang|="en"] {color: red;}
上面這個(gè)規(guī)則會(huì)選擇 lang 屬性等于 en 或以 en- 開頭的所有元素。因此，以下示例標(biāo)記中的前三個(gè)元素將被選中，而不會(huì)選擇后兩個(gè)元素：
<p lang="en">Hello!</p> <p lang="en-us">Greetings!</p> <p lang="en-au">G'day!</p> <p lang="fr">Bonjour!</p> <p lang="cy-en">Jrooana!</p>
一般來說，[att|="val"] 可以用于任何屬性及其值。
假設(shè)一個(gè) HTML 文檔中有一系列圖片，其中每個(gè)圖片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下選擇器匹配所有這些圖像：
img[src|="figure"] {border: 1px solid gray;}
當(dāng)然，這種屬性選擇器最常見的用途還是匹配語言值。
CSS 選擇器參考手冊
| 選擇器 | 描述 |
|---|---|
| [attribute] | 用于選取帶有指定屬性的元素。 |
| [attribute=value] | 用于選取帶有指定屬性和值的元素。 |
| [attribute~=value] | 用于選取屬性值中包含指定詞匯的元素。 |
| [attribute|=value] | 用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個(gè)單詞。 |
| [attribute^=value] | 匹配屬性值以指定值開頭的每個(gè)元素。 |
| [attribute$=value] | 匹配屬性值以指定值結(jié)尾的每個(gè)元素。 |
| [attribute*=value] | 匹配屬性值中包含指定值的每個(gè)元素。 |