CSS 属性选择器 Attribute selectors

Docs

属性选择器 Attribute selector：按照给定的属性，选择所有匹配的元素。

语法：[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
例子：[autoplay] 选择所有具有 autoplay 属性的元素（不论这个属性的值是什么）。

属性选择器 Attribute selector
/* 存在 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;
}

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

[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 字符范围之内的字母）。

[att]: 拥有某一个属性
[att=val]: 属性等于某个值
[attr*=val]: 属性值包含某一个值 val;
[attr^=val]: 属性值以 val 开头;
[attr$=val]: 属性值以 val 结尾;
[attr|=val]: 属性值等于 val 或者以 val 开头后面紧跟连接符-;
[attr~=val]: 属性值包含 val, 如果有其他值必须以空格和 val 分割;

HTML
CSS

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

.demo-link {
  color: #6d67e4;
}

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

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

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

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

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

http://localhost:3000/css-attribute-selectors.html