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特定.