CSS 属性选择器

2024-04-14 07:35:05 31

示例

总览

属性选择器可以与各种类型的运算符一起使用，从而相应地更改选择标准。他们使用给定属性或属性值的存在来选择元素。

选择器⁽¹⁾匹配元素选择元素...CSS版本[attr]<divattr>有属性attr2[attr='val']<divattr="val">属性attr具有价值val2[attr~='val']<divattr="valval2val3">哪里val出现在
空白分隔的列表中attr2[attr^='val']<divattr="val1val2">其中attr的价值开始与val3[attr$='val']<divattr="sthaval">凡attr的价值两端用val3[attr*='val']<divattr="somevalhere">哪里attr包含val任何地方3[attr|='val']<divattr="val-sthetc">其中attr的值正好是val，
或以（U+002D）开头val并紧随
其后-2[attr='val' i]<div attr="val">凡attr有价值val，
忽略val字母大写。4⁽²⁾

笔记：

该属性值可以用单引号或双引号引起来。完全没有引号也可能起作用，但是根据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但特异性较低。

有关更多详细信息，请参见语法部分。