[CSS] 屬性選擇器 （CSS attribute selector）

标签：lan   完全   dev   lock   html   school   htm   空格   err   

@(CSS)

TL;DR

1
2
3
4
5
6
7

[attribute]         
[attribute = "value"]   // 具有某個屬性及特定屬性值
[attribute ~= "value"]   // 包含某個屬性值（以空白分格）
[attribute |= "value"]   // 以 - 為開頭
[attribute ^= "value"]   // 以某屬性值為開頭的屬性
[attribute $= "value"]   // 以某屬性值為結尾的屬性
[attribute *= "value"]   // 包含某屬性質的屬性

簡單屬性選擇 [attribute]

選擇所有具有 title 屬性的元素：

1

[title]{ ... }

選擇所有具有 href 屬性的 <a> 元素：

1

a[href]{ ... }

選擇同時具有 href 和 title 屬性的 <a> 元素：

1

a[href][title]{ ... }

根據具體屬性值選擇 [attribute = "value"]

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

選擇具有特定 href 屬性值的 <a> 元素：

1

a[href="www.google.com.tw"]{...}

選擇具有特定 href 屬性值和 title 屬性值的 <a> 元素

1

a[href="www.google.com.tw"][title="W3School"]{ ... }

根據部分屬性值選擇 [attribute ~= "value"]

如果需要根據屬性值中的某個詞進行選擇（可以忽略掉屬性值之間的空格），則需要使用波浪號（~）

1

div[data-color ~= "blue"]{ ... }

子串匹配屬性選擇器

1
2
3

[abc ^= "def"]{ ... }   // 以 def 屬性值為開頭的 abc 屬性
[abc $= "def"]{ ... }   // 以 def 屬性值為結尾的 abc 屬性
[abc *= "def"]{ ... }   // 包含 def 屬性值的 abc 屬性

特定屬性選擇類型

1

[abc |= "en]{ ... }   // 以 en 或 en- 屬性值開頭的 abc 屬性

假設一個HTML文檔中有一系列圖片，其中每個圖片的文件名都形如figure-1.jpg 和 figure-2.jpg。就可以使用以下選擇器匹配所有這些圖像：

1

img[src|="figure"] {...}

參考資料

• CSS Attribute Selector @ MDN
• CSS Selector Attribute @ W3School

原文:大专栏  [CSS] 屬性選擇器 （CSS attribute selector）

[CSS] 屬性選擇器 （CSS attribute selector）

标签：lan   完全   dev   lock   html   school   htm   空格   err   

原文地址：https://www.cnblogs.com/wangziqiang123/p/11618255.html