CSS:Attribute selectors
[att]
具有 att 属性的元素,不考虑属性值。例如
img[alt] {}
<img src="..." alt="..." />
<img src="..." />
匹配第一个 IMG 元素,但是不匹配第二个 IMG 元素。
[att=val]
具有 att 属性,且属性值恰为 val 的元素。例如
a[rel="external"] {}
<a href="" rel="external">...</a>
<a href="...">...</a>
<a href="..." rel="internal">...</a>
匹配第一个 A 元素,但是不匹配第二个和第三个 A 元素。
[att~=val]
具有 att 属性,该属性值由空格分隔的多个词组成(也可以仅有一个词),其中恰好有一个词为 val 的元素。例如
div[class~="item"] {}
<div class="item">...</div>
<div class="current-item item">...</div>
<div class="page">...</div>
<div class="current-item page">...</div>
匹配第一个和第二个 DIV 元素,但是不匹配第三个和第四个 DIV 元素。
[att|=val]
具有 att 属性,且属性值恰好为 val 或是以 val 开头并紧跟连字符 - 的元素。例如
a[hreflang|="zh"] {}
<a href="..." hreflang="zh">...</a>
<a href="..." hreflang="zh-CN">...</a>
<a href="..." hreflang="en zh">...</a>
<a href="..." hreflang="en zh-CN">...</a>
匹配第一个和第二个 A 元素,但是不匹配第三个和第四个 A 元素。
[att^=val]
具有 att 属性,且属性值以 val 开头的元素。例如
a[href^="http://fengyouyi.com"] {}
<a href="http://fengyouyi.com">Home</a>
<a href="http://fengyouyi.com/about">About</a>
<a href="/about">About</a>
<a href="http://www.chinahtml.com/">ChinaHTML</a>
匹配第一个和第二个 A 元素,但是不匹配第三个和第四个 A 元素。
[att$=val]
具有 att 属性,且属性值以 val 结尾的元素。例如
a[href$=".html"] {}
<a href="/about.html">About</a>
<a href="/about.htm">About</a>
匹配第一个 A 元素,但是不匹配第二个 A 元素。
[att*=val]
具有 att 属性,且属性值中包含有 val 子字符串的元素。例如
div[class*="item"] {}
<div class="item">...</div>
<div class="currentitem">...</div>
<div class="page">...</div>
匹配第一个和第二个 DIV 元素,但是不匹配第三个 DIV 元素。