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;
}
[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]
表示带有以 attr 命名的属性, 且属性值匹配"value" [忽略属性值大小] 的元素。在带有属性值的属性选型选择器表达式的右方括号, 前添加用空格间隔开的字母i(或I)可以忽略属性值的大小写(ASCII字符范围内的字母)

示例

a {
  color: blue;
}

/* 存在href属性并且属性值以"#"开始的<a> 元素, 如下选择 */
a[href^="#"] {
  background-color: gold;
}

/* 存在href属性并且属性值包含"example"的<a> 元素, 如下选择*/
a[href*="example"] {
  background-color: silver;
}

/* 存在href属性并且属性值包含"insensitive"的<a> 元素,
   i 表示忽略"insensitive"的大小写, 如下选择 */
a[href*="insensitive" i] {
  color: cyan;
}

/* 存在href属性并且属性值结尾是".org"的<a> 元素, 如下选择 */
a[href$=".org"] {
  color: red;
}
<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>

Languages

/* 所有包含`lang`属性的<div> 元素, 设置css font-weight: bold. */
div[lang] {
  font-weight: bold;
}

/* 所有包含`lang`属性并且属性值是以空格为间隔的值列表, 值列表中包含"en-us"的<div> 元素, 
设置css color:blue. */
div[lang~="en-us"] {
  color: blue;
}

/* 所有包含`lang`属性并且属性值匹配"pt"的<div> 元素, 设置css color:green. */
div[lang="pt"] {
  color: green;
}

/* 所有包含`lang`属性并且属性值匹配"zh"或 以"zh-"为开头的<div> 元素, 设置css color:red, 无论
   简体中文 (zh-CN) 或者 繁体中文 (zh-TW). */
div[lang|="zh"] {
  color: red;
}

/* 所有包含`data-lang`属性并且属性值匹配"zh-TW"的<div> 元素, 设置css color:purple. */
/* 注意: 你还可以使用带连字符的属性, 没有双括号, 如下所示 */ 
div[data-lang="zh-TW"] {
  color: purple;
}
<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>

规范

Specification Status Comment
Selectors Level 4
attribute selectors
Working Draft Added modifier for ASCII case-insensitive attribute value selection.
Selectors Level 3
attribute selectors
Recommendation  
CSS Level 2 (Revision 1)
attribute selectors
Recommendation 初始定义

浏览器支持

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) 1.0 (1.7 or earlier) 7 9 3
Case-insensitive modifier 49.0 47.0 (47.0) ? ? 9
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support ? (Yes) 1.0 (1) ? ? ? (Yes)
Case-insensitive modifier ? 49.0 47.0 (47.0) ? ? 9 49.0

文档标签和贡献者

最后编辑者: littleostar,