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

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选择器更具特异性？

2 个答案: