属性选择器
概述
属性选择器可以与各种类型的运算符一起使用，从而相应地更改选择标准。他们使用给定属性或属性值的选择来选择元素。
笔记：
-
属性值可以用单引号或双引号括起来。根本没有引号可能也有效，但根据 CSS 标准，它是无效的，并且不鼓励。
-
没有单一的集成 CSS4 规范，因为它被拆分为单独的模块。但是，有“4 级”模块。查看浏览器支持 。
细节
[attribute]
选择具有给定属性的元素。
div[data-color] {
color: red;
}
<div data-color="red">This will be red</div>
<div data-color="green">This will be red</div>
<div data-background="red">This will NOT be red</div>
[attribute="value"]
选择具有给定属性和值的元素。
div[data-color="red"] {
color: red;
}
<div data-color="red">This will be red</div>
<div data-color="green">This will NOT be red</div>
<div data-color="blue">This will NOT be red</div>
[attribute*="value"]
选择具有给定属性和值的元素，其中给定属性在任何位置包含给定值（作为子字符串）。
[class*="foo"] {
color: red;
}
<div class="foo-123">This will be red</div>
<div class="foo123">This will be red</div>
<div class="bar123foo">This will be red</div>
<div class="barfooo123">This will be red</div>
<div class="barfo0">This will NOT be red</div>
[attribute~="value"]
选择具有给定属性和值的元素，其中给定值出现在以空格分隔的列表中。
[class~="color-red"] {
color: red;
}
<div class="color-red foo-bar the-div">This will be red</div>
<div class="color-blue foo-bar the-div">This will NOT be red</div>
[attribute^="value"]
选择具有给定属性和值的元素，其中给定属性以值开头。
[class^="foo-"] {
color: red;
}
<div class="foo-123">This will be red</div>
<div class="foo-234">This will be red</div>
<div class="bar-123">This will NOT be red</div>
[attribute$="value"]
选择具有给定属性和值的元素，其中给定属性以给定值结束。
[class$="file"] {
color: red;
}
<div class="foobar-file">This will be red</div>
<div class="foobar-file">This will be red</div>
<div class="foobar-input">This will NOT be red</div>
[attribute|="value"]
选择具有给定属性和值的元素，其中属性的值恰好是给定值，或者恰好是给定值，后跟 -（U + 002D）
[lang|="EN"] {
color: red;
}
<div lang="EN-us">This will be red</div>
<div lang="EN-gb">This will be red</div>
<div lang="PT-pt">This will NOT be red</div>
[attribute="value" i]
选择具有给定属性和值的元素，其中属性的值可以表示为 Value，VALUE，vAlUe 或任何其他不区分大小写的可能性。
[lang="EN" i] {
color: red;
}
<div lang="EN">This will be red</div>
<div lang="en">This will be red</div>
<div lang="PT">This will NOT be red</div>
属性选择器的特殊性
0-1-0
与类选择器和伪类相同。
*[type=checkbox] // 0-1-0
请注意，这意味着属性选择器可用于通过 ID 以较低的特异性水平选择元素，而不是使用 ID 选择器选择元素：[id="my-ID"] 的目标元素与 #my-ID 相同，但特异性较低。
有关更多详细信息，请参见语法部分 。