ID 属性的属性选择器是否不如 ID 选择器具体？

Question

我需要做什么才能使 [id^=value] 选择器具有与常规 ID 相同的特异性，为什么它不等于或大于？ （考虑到我也给了它html）

html div[id^="blue"] {
    background-color: blue
}

#blue4 {
    background-color: red
}

jsfiddle: http://jsfiddle.net/bjwe6yr0/1/

Answer 1

属性选择器总是不如 ID 选择器具体；它的特异性值不会根据属性名称而改变。选择器仅将特定属性名称映射到 class 选择器和 ID 选择器；属性选择器是一个通用概念，不包含任何此类映射。

复杂选择器具有 ID 特异性的唯一方式是它包含一个或多个 ID 选择器。除了实施限制，理论上不可能用任意数量的属性选择器或任何其他类型的简单选择器覆盖单个 ID 选择器。

以下是您的两个选择器的比较：

/* 1 attribute, 2 types -> specificity = 0-1-2 */
html div[id^="blue"] {
    background-color: blue
}

/* 1 ID                 -> specificity = 1-0-0 */
#blue4 {
    background-color: red
}

即使添加 html 也无济于事，因为它只是一个类型选择器。将其更改为 :root，您将得到一个伪 class，它同样特定于属性选择器，因此仍然不如 ID 特定。

Answer 2

您可以考虑使用 not() 选择器以附加一个随机 ID，然后您将具有更高或相同的特异性，因为 not() 的特异性等于选择器的特异性里面：

html body div[id^="blue"]:not(#randomID) {
  background-color: blue
}

#blue4 {
  background-color: red
}

div {
  height: 50px;
  width: 50px
}

<div id="blue1"></div>
<div id="blue2"></div>
<div id="blue3"></div>
<div id="blue4"></div>

ID 属性的属性选择器是否不如 ID 选择器具体？

Is an attribute selector for the ID attribute less specific than an ID selector?

html

css

css-selectors

css-specificity