html - 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 选择器具体；它的特异性值不会根据属性名称而改变。选择器只将特定的属性名映射到类选择器和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，您将获得一个伪类，它同样特定于属性选择器，因此仍然不如 ID 特定。