Skip to main content

[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] {  ...;}

選擇同時具有 hreftitle 屬性的 <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.jpgfigure-2.jpg。就可以使用以下選擇器匹配所有這些圖像:

img[src|='figure'] {  ...;}

參考資料#