CSS 屬性選擇器詳解 · W3School HTML & CSS 教程

# 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：為 XML 文檔使用屬性選擇器屬性選擇器在 XML 文檔中相當有用，因為 XML 語言主張要針對元素和屬性的用途指定元素名和屬性名。假設我們為描述太陽系行星設計了一個 XML 文檔。如果我們想選擇有 moons 屬性的所有 planet 元素，使之顯示為紅色，以便能更關注有 moons 的行星，就可以這樣寫： ``` planet[moons] {color:red;} ``` 這會讓以下標記片段中的第二個和第三個元素的文本顯示為紅色，但第一個元素的文本不是紅色： ``` <planet>Venus</planet> <planet moons="1">Earth</planet> <planet moons="2">Mars</planet> ``` [查看效果](/css/planetml_attselector_att.xml) ## 根據具體屬性值選擇除了選擇擁有某些屬性的元素，還可以進一步縮小選擇范圍，只選擇有特定屬性值的元素。 ### 例子 1 例如，假設希望將指向 Web 服務器上某個指定文檔的超鏈接變成紅色，可以這樣寫： ``` a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;} ``` ### 例子 2 與簡單屬性選擇器類似，可以把多個屬性-值選擇器鏈接在一起來選擇一個文檔。 ``` a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;} ``` 這會把以下標記中的第一個超鏈接的文本變為紅色，但是第二個或第三個鏈接不受影響： ``` <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> ``` ### 例子 3 同樣地，XML 語言也可以利用這種方法來設置樣式。下面我們再回到行星那個例子中。假設只希望選擇 moons 屬性值為 1 的那些 planet 元素： ``` planet[moons="1"] {color: red;} ``` 上面的代碼會把以下標記中的第二個元素變成紅色，但第一個和第三個元素不受影響： ``` <planet>Venus</planet> <planet moons="1">Earth</planet> <planet moons="2">Mars</planet> ``` [查看效果](/css/planetml_attselector_val.xml) ### 屬性與屬性值必須完全匹配請注意，這種格式要求必須與屬性值完全匹配。如果屬性值包含用空格分隔的值列表，匹配就可能出問題。請考慮一下的標記片段： ``` This paragraph is a very important warning. ``` 如果寫成 p[class="important"]，那么這個規則不能匹配示例標記。要根據具體屬性值來選擇該元素，必須這樣寫： ``` p[class="important warning"] {color: red;} ``` ## 根據部分屬性值選擇如果需要根據屬性值中的詞列表的某個詞進行選擇，則需要使用波浪號（~）。假設您想選擇 class 屬性中包含 important 的元素，可以用下面這個選擇器做到這一點： ``` p[class~="important"] {color: red;} ``` 如果忽略了波浪號，則說明需要完成完全值匹配。 ### 部分值屬性選擇器與點號類名記法的區別該選擇器等價于我們在類選擇器中討論過的點號類名記法。也就是說，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" 的所有元素 | 可以想到，這些選擇有很多用途。舉例來說，如果希望對指向 W3School 的所有鏈接應用樣式，不必為所有這些鏈接指定 class，再根據這個類編寫樣式，而只需編寫以下規則： ``` a[href*="w3school.com.cn"] {color: red;} ``` 提示：任何屬性都可以使用這些選擇器。 ## 特定屬性選擇類型最后為您介紹特定屬性選擇器。請看下面的例子： ``` *[lang|="en"] {color: red;} ``` 上面這個規則會選擇 lang 屬性等于 en 或以 en- 開頭的所有元素。因此，以下示例標記中的前三個元素將被選中，而不會選擇后兩個元素： ``` Hello! Greetings! G'day! Bonjour! Jrooana! ``` 一般來說，[att|="val"] 可以用于任何屬性及其值。假設一個 HTML 文檔中有一系列圖片，其中每個圖片的文件名都形如 _figure-1.jpg_ 和 _figure-2.jpg_。就可以使用以下選擇器匹配所有這些圖像： ``` img[src|="figure"] {border: 1px solid gray;} ``` 當然，這種屬性選擇器最常見的用途還是匹配語言值。 ## CSS 選擇器參考手冊 | 選擇器 | 描述 | | --- | --- | | [[_attribute_]](/cssref/selector_attribute.asp "CSS [attribute] 選擇器") | 用于選取帶有指定屬性的元素。 | | [[_attribute_=_value_]](/cssref/selector_attribute_value.asp "CSS [attribute=value] 選擇器") | 用于選取帶有指定屬性和值的元素。 | | [[_attribute_~=_value_]](/cssref/selector_attribute_value_contain.asp "CSS [attribute~=value] 選擇器") | 用于選取屬性值中包含指定詞匯的元素。 | | [[_attribute_|=_value_]](/cssref/selector_attribute_value_start.asp "CSS [attribute|=value] 選擇器") | 用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。 | | [[_attribute_^=_value_]](/cssref/selector_attr_begin.asp "CSS [attribute^=value] 選擇器") | 匹配屬性值以指定值開頭的每個元素。 | | [[_attribute_$=_value_]](/cssref/selector_attr_end.asp "CSS [attribute$=value] 選擇器") | 匹配屬性值以指定值結尾的每個元素。 | | [[_attribute_*=_value_]](/cssref/selector_attr_contain.asp "CSS [attribute*=value] 選擇器") | 匹配屬性值中包含指定值的每個元素。 |