[CSS] 屬性選擇器 (CSS attribute selector)
TL;DR
[attribute] // 具有某個屬性
[attribute = "value"] // 具有某個屬性及特定屬性值
[attribute ~= "value"] // 包含某個屬性值(以空白分格)
[attribute |= "value"] // 以 - 為開頭
[attribute ^= "value"] // 以某屬性值為開頭的屬性
[attribute $= "value"] // 以某屬性值為結尾的屬性
[attribute *= "value"] // 包含某屬性質的屬性
簡單屬性選擇 [attribute]
選擇所有具有 title
屬性的元素:
[title] {
...;
}
選擇所有具有 href
屬性的 <a>
元素:
a[href] {
...;
}
選擇同時具有 href
和 title
屬性的 <a>
元素:
a[href][title] {
...;
}
根據具體屬性值選擇 [attribute = "value"]
屬性與屬性值必須完全匹配
選擇具有特定 href
屬性值的 <a>
元素:
a[href='www.google.com.tw'] {
...;
}
選擇具有特定 href
屬性值和 title
屬性值的 <a>
元素
a[href='www.google.com.tw'][title='W3School'] {
...;
}
根據部分屬性值選擇 [attribute ~= "value"]
如果需要根據屬性值中的某個詞進行選擇(可以忽略掉屬性值之間的空格),則需要使用波浪號(
~
)
div[data-color~='blue'] {
...;
}
子串匹配屬性選擇器
[abc ^= "def"]{ ... } // 以 def 屬性值為開頭的 abc 屬性
[abc $= "def"]{ ... } // 以 def 屬性值為結尾的 abc 屬性
[abc *= "def"]{ ... } // 包含 def 屬性值的 abc 屬性
特定屬性選擇類型
[abc |= "en]{ ... } // 以 en 或 en- 屬性值開頭的 abc 屬性
假設一個 HTML 文檔中有一系列圖片,其中每個圖片的文件名都形如figure-1.jpg
和 figure-2.jpg
。就可以使用以下選擇器匹配所有這些圖像:
img[src|='figure'] {
...;
}
參考資料
- CSS Attribute Selector @ MDN
- CSS Selector Attribute @ W3School