[CSS] 屬性選擇器 (CSS attribute selector)
Posted wangziqiang123
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[CSS] 屬性選擇器 (CSS attribute selector)相关的知识,希望对你有一定的参考价值。
@(CSS)
TL;DR
1 | [attribute] |
簡單屬性選擇 [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 | [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)的主要内容,如果未能解决你的问题,请参考以下文章
jquery过滤选择器-----------(屬性过滤选择器)
[CSS] Targeting Elements with CSS Attribute Selectors