属性选择器可以与各种类型的运算符一起使用，从而相应地更改选择标准。他们使用给定属性或属性值的存在来选择元素。
| 选择器(1) | 匹配元素 | 选择元素... | CSS版本 |
|---|---|---|---|
| [attr] | <div attr> | 有属性 attr | 2 |
| [attr='val'] | <div attr="val"> | 属性attr具有价值val | 2 |
| [attr~='val'] | <div attr="val val2 val3"> | 哪里val出现在 空白分隔的列表中attr | 2 |
| [attr^='val'] | <div attr="val1 val2"> | 其中attr的价值开始与val | 3 |
| [attr$='val'] | <div attr="sth aval"> | 凡attr的价值两端用val | 3 |
| [attr*='val'] | <div attr="somevalhere"> | 哪里attr包含val任何地方 | 3 |
| [attr|='val'] | <div attr="val-sth etc"> | 其中attr的值正好是val， 或以（U + 002D）开头val并紧随 其后- | 2 |
| [attr='val' i] | <div attr="val"> | 凡attr有价值val， 忽略val字母大写。 | 4 (2) |
笔记：
该属性值可以用单引号或双引号引起来。完全没有引号也可能起作用，但是根据CSS标准，它无效，因此不建议使用。
没有单一的，集成的CSS4规范，因为它被分为多个单独的模块。但是，有“ 4级”模块。请参阅浏览器支持。
选择具有给定属性的元素。
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>
选择具有给定属性和值的元素。
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>
选择具有给定属性和值的元素，其中给定属性在任何地方都包含给定值（作为子字符串）。
[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>
选择具有给定属性和值的元素，其中给定值出现在以空格分隔的列表中。
[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>
选择具有给定属性和值的元素，其中给定属性以值开头。
[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>
选择具有给定属性和值的元素，其中给定属性以给定值结尾。
[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>
选择具有给定属性和值的元素，其中属性的值恰好是给定值或恰好是给定值，后跟-（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>
选择元件与给定属性和值，其中该属性的值可以被表示为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>
与类选择器和伪类相同。
*[type=checkbox] // 0-1-0
请注意，这意味着与使用ID选择器选择的属性相比，可以使用属性选择器通过其ID以较低的特异性选择[id="my-ID"]元素：以与相同的元素作为目标，#my-ID但特异性较低。
有关更多详细信息，请参见语法部分。