ID属性的属性选择器是否不如ID选择器那么具体？
ID属性的属性选择器是否不如ID选择器那么具体？
提问于 2015-09-30 21:57:38
我需要做什么才能使[id^=value]选择器具有与常规ID相同的特异性，为什么它还不相等或更大？(考虑到我也给了它html )
html div[id^="blue"] {
background-color: blue
}
#blue4 {
background-color: red
}http://jsfiddle.net/bjwe6yr0/1/：jsfiddle
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-09-30 22:10:37
属性选择器始终没有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特定。
Stack Overflow用户
发布于 2018-06-01 05:53:24
您可以考虑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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32868028
复制相关文章
相似问题