属性选择器

翻译不完整。 请帮助我们翻译这篇文章!

CSS 属性选择器通过已经存在的属性名或属性值匹配元素。

/* 存在title属性的<a> 元素 */
a[title] {
  color: purple;
}

/* 存在href属性并且属性值匹配"https://example.org"的<a> 元素 */
a[href="https://example.org"] {
  color: green;
}

/* 存在href属性并且属性值包含"example"的<a> 元素 */
a[href*="example"] {
  font-size: 2em;
}

/* 存在href属性并且属性值结尾是".org"的<a> 元素 */
a[href$=".org"] {
  font-style: italic;
}

/* 存在class属性并且属性值包含"logo"的<a>元素 */
a[class~="logo"] {
  padding: 2px;
}

语法

[attr]
表示带有以 attr 命名的属性的元素。
[attr=value]
表示带有以 attr 命名的属性,且属性值为 value 的元素。
[attr~=value]
表示带有以 attr 命名的属性的元素,并且该属性是一个以空格作为分隔的值列表,其中至少有一个值为 value
[attr|=value]
表示带有以 attr 命名的属性的元素,属性值为“value”或是以“value-”为前缀("-"为连字符,Unicode 编码为 U+002D)开头。典型的应用场景是用来匹配语言简写代码(如 zh-CN,zh-TW 可以用 zh 作为 value)。
[attr^=value]
表示带有以 attr 命名的属性,且属性值是以 value 开头的元素。
[attr$=value]
表示带有以 attr 命名的属性,且属性值是以 value 结尾的元素。
[attr*=value]
表示带有以 attr 命名的属性,且属性值包含有 value 的元素。
[attr operator value i]
在属性选择器的右方括号前添加一个用空格隔开的字母 i(或 I),可以在匹配属性值时忽略大小写(支持 ASCII 字符范围之内的字母)。
[attr operator value s]
在属性选择器的右方括号前添加一个用空格隔开的字母 s(或 S),可以在匹配属性值时区分大小写(支持 ASCII 字符范围之内的字母)。

示例

链接

CSS

a {
  color: blue;
}

/* 以 "#" 开头的页面本地链接 */
a[href^="#"] {
  background-color: gold;
}

/* 包含 "example" 的链接 */
a[href*="example"] {
  background-color: silver;
}

/* 包含 "insensitive" 的链接,不区分大小写 */
a[href*="insensitive" i] {
  color: cyan;
}

/* 包含 "cAsE" 的链接,区分大小写 */ 
a[href*="cAsE" s] { 
  color: pink; 
}

/* 以 ".org" 结尾的链接 */
a[href$=".org"] {
  color: red;
}

HTML

<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
</ul>

结果

多语言

CSS

/* 将所有包含 `lang` 属性的 <div> 元素的字重设为 bold */
div[lang] {
  font-weight: bold;
}

/* 将所有语言为美国英语的 <div> 元素的文本颜色设为蓝色 */
div[lang~="en-us"] {
  color: blue;
}

/* 将所有语言为葡萄牙语的 <div> 元素的文本颜色设为绿色 */
div[lang="pt"] {
  color: green;
}

/* 将所有语言为中文的 <div> 元素的文本颜色设为红色
   无论是简体中文(zh-CN)还是繁体中文(zh-TW) */
div[lang|="zh"] {
  color: red;
}

/* 将所有 `data-lang` 属性的值为 "zh-TW" 的 <div> 元素的文本颜色设为紫色 */
/* 备注: 和 JS 不同,CSS 可以在不使用双引号的情况下直接使用带连字符的属性名 */ 
div[data-lang="zh-TW"] {
  color: purple;
}

HTML

<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-CN">世界您好!</div>
<div lang="zh-TW">世界您好!</div>
<div data-lang="zh-TW">世界您好!</div>

结果

HTML ordered lists

The HTML specification requires the type attribute to be matched case-insensitively due to it primarily being used in the <input> element, trying to use attribute selectors to with the type attribute of an ordered list doesn't work without the case-sensitive modifier.

CSS

/* List types require the case sensitive flag due to a quirk in how HTML treats the type attribute. */
ol[type="a"] {
  list-style-type: lower-alpha;
  background: red;
}

ol[type="a" s] {
  list-style-type: lower-alpha;
  background: lime;
}

ol[type="A" s] {
  list-style-type: upper-alpha;
  background: lime;
}

HTML

<ol type="A">
  <li>Example list</li>
</ol>

结果

规范

规范 状态 备注
Selectors Level 4
attribute selectors
Working Draft Adds modifier for ASCII case-sensitive and case-insensitive attribute value selection.
Selectors Level 3
attribute selectors
Recommendation
CSS Level 2 (Revision 1)
attribute selectors
Recommendation 初始定义

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Attribute selector ([attr=value])Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 7Opera Full support 9Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
Case-insensitive modifier (i)Chrome Full support 49Edge Full support 79Firefox Full support 47IE No support NoOpera Full support 36Safari Full support 9WebView Android Full support 49Chrome Android Full support 49Firefox Android Full support 47Opera Android Full support 36Safari iOS Full support 9Samsung Internet Android Full support 5.0
Case-sensitive modifier (s)Chrome No support No
Notes
No support No
Notes
Notes See bug 1041095.
Edge No support No
Notes
No support No
Notes
Notes See bug 1041095.
Firefox Full support 66IE No support NoOpera No support No
Notes
No support No
Notes
Notes See bug 1041095.
Safari No support NoWebView Android No support No
Notes
No support No
Notes
Notes See bug 1041095.
Chrome Android No support No
Notes
No support No
Notes
Notes See bug 1041095.
Firefox Android Full support 66Opera Android No support No
Notes
No support No
Notes
Notes See bug 1041095.
Safari iOS No support NoSamsung Internet Android No support No
Notes
No support No
Notes
Notes See bug 1041095.

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.

参见