ID属性的属性选择器是否不如ID选择器特定?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (33)

我需要做些什么才能使[id^=value]选择器与常规ID具有相同的特性,为什么它不是已经相等或更大?(考虑到我也给了它html

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

#blue4 {
    background-color: red
}
提问于
用户回答回答于

属性选择器总是比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具体。

用户回答回答于

你可以考虑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>

扫码关注云+社区

领取腾讯云代金券