[CSS] 屬性選擇器 (CSS attribute selector)

Posted wangziqiang123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[CSS] 屬性選擇器 (CSS attribute selector)相关的知识,希望对你有一定的参考价值。

@(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] ... 

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

1
img[src|="figure"] ...

參考資料

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


以上是关于[CSS] 屬性選擇器 (CSS attribute selector)的主要内容,如果未能解决你的问题,请参考以下文章

使用 `:root` 選擇器來設定彈性的字體大小

jquery过滤选择器-----------(屬性过滤选择器)

[CSS] Targeting Elements with CSS Attribute Selectors

CSS [attribute="value"] 选择器是不是不必要? [复制]

CSS尝试性使用一下css容易混淆的属性选择器

CSS尝试性使用一下css容易混淆的属性选择器