親自試一試

與上面類似，可以只對有 href 屬性的錨（a 元素）應用樣式：

a[href] {color:red;}

親自試一試

還可以根據(jù)多個屬性進行選擇，只需將屬性選擇器鏈接在一起即可。

例如，為了將同時有 href 和 title 屬性的 HTML 超鏈接的文本設(shè)置為紅色，可以這樣寫：

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

親自試一試

可以采用一些創(chuàng)造性的方法使用這個特性。

例如，可以對所有帶有 alt 屬性的圖像應用樣式，從而突出顯示這些有效的圖像：

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

親自試一試

提示：上面這個特例更適合用來診斷而不是設(shè)計，即用來確定圖像是否確實有效。

屬性選擇器在 XML 文檔中相當有用，因為 XML 語言主張要針對元素和屬性的用途指定元素名和屬性名。

假設(shè)我們?yōu)槊枋鎏栂敌行窃O(shè)計了一個 XML 文檔。如果我們想選擇有 moons 屬性的所有 planet 元素，使之顯示為紅色，以便能更關(guān)注有 moons 的行星，就可以這樣寫：

planet[moons] {color:red;}

這會讓以下標記片段中的第二個和第三個元素的文本顯示為紅色，但第一個元素的文本不是紅色：

 planet Venus /planet  planet moons= 1 Earth /planet  planet moons= 2 Mars /planet 

查看效果

除了選擇擁有某些屬性的元素，還可以進一步縮小選擇范圍，只選擇有特定屬性值的元素。

例如，假設(shè)希望將指向 Web 服務(wù)器上某個指定文檔的超鏈接變成紅色，可以這樣寫：

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

親自試一試

與簡單屬性選擇器類似，可以把多個屬性-值選擇器鏈接在一起來選擇一個文檔。

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

這會把以下標記中的第一個超鏈接的文本變?yōu)榧t色，但是第二個或第三個鏈接不受影響：

 a href= http://www.w3school.com.cn/ title= W3School W3School /a  a href= http://www.w3school.com.cn/css/ title= CSS CSS /a  a href= http://www.w3school.com.cn/html/ title= HTML HTML /a 

親自試一試

同樣地，XML 語言也可以利用這種方法來設(shè)置樣式。

下面我們再回到行星那個例子中。假設(shè)只希望選擇 moons 屬性值為 1 的那些 planet 元素：

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

上面的代碼會把以下標記中的第二個元素變成紅色，但第一個和第三個元素不受影響：

 planet Venus /planet  planet moons= 1 Earth /planet  planet moons= 2 Mars /planet 

查看效果

請注意，這種格式要求必須與屬性值完全匹配。

如果屬性值包含用空格分隔的值列表，匹配就可能出問題。

請考慮一下的標記片段：

 p >
如果寫成 p[ >
要根據(jù)具體屬性值來選擇該元素，必須這樣寫：
p[ >
親自試一試

假設(shè)您想選擇 class 屬性中包含 important 的元素，可以用下面這個選擇器做到這一點：
p[class~= important ] {color: red;}
親自試一試
如果忽略了波浪號，則說明需要完成完全值匹配。
部分值屬性選擇器與點號類名記法的區(qū)別
該選擇器等價于我們在類選擇器中討論過的點號類名記法。
也就是說，p.important 和 p[ >
那么，為什么還要有 ~= 屬性選擇器呢？因為它能用于任何屬性，而不只是 class。
例如，可以有一個包含大量圖像的文檔，其中只有一部分是圖片。對此，可以使用一個基于 title 文檔的部分屬性選擇器，只選擇這些圖片：
img[title~= Figure ] {border: 1px solid gray;}
這個規(guī)則會選擇 title 文本包含 Figure 的所有圖像。沒有 title 屬性或者 title 屬性中不包含 Figure 的圖像都不會匹配。
親自試一試
子串匹配屬性選擇器
下面為您介紹一個更高級的選擇器模塊，它是 CSS2 完成之后發(fā)布的，其中包含了更多的部分值屬性選擇器。按照規(guī)范的說法，應該稱之為“子串匹配屬性選擇器”。
很多現(xiàn)代瀏覽器都支持這些選擇器，包括 IE7。
下表是對這些選擇器的簡單總結(jié)：

舉例來說，如果希望對指向 W3School 的所有鏈接應用樣式，不必為所有這些鏈接指定 class，再根據(jù)這個類編寫樣式，而只需編寫以下規(guī)則：
a[href        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。