根據具體屬性值選擇

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

例子 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;}

這會把以下標記中的第一個超鏈接的文本變為紅色，但是第二個或第三個鏈接不受影響：

W3School

CSS

HTML

例子 3

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

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

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

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

Venus

Earth

Mars

屬性與屬性值必須完全匹配

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

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

請考慮一下的標記片段：

This paragraph is a very important warning.

如果寫成 p[class="important"]，那么這個規則不能匹配示例標記。

要根據具體屬性值來選擇該元素，必須這樣寫：

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

總結

以上是生活随笔為你收集整理的简述css属性选择器的几种定义方式_CSS 属性选择器详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。