ID 属性的属性选择器是不是不如 ID 选择器具体？

Posted 2023-03-06

【中文标题】ID 属性的属性选择器是不是不如 ID 选择器具体？

【英文标题】：Is an attribute selector for the ID attribute less specific than an ID selector?ID 属性的属性选择器是否不如 ID 选择器具体？

【发布时间】：2015-12-28 08:29:11

【问题描述】：

我需要做什么才能使[id^=value] 选择器具有与常规 ID 相同的特异性，为什么它不再等于或大于？ （考虑到我也给了它html）

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


#blue4 
    background-color: red

jsfiddle: http://jsfiddle.net/bjwe6yr0/1/

【问题讨论】：

这是CSS设计的问题。 A ID selector (#) has a higher specificity 比类和属性选择器。

那么，虽然它选择了 ID，但它实际上并没有被记为 ID？ 我现在正在查看您的链接

div[id^="blue"] 是一个属性选择器。你也可以用同样的方式联系[data-something]。此外，如果您在示例中处理 id，则不要使用专用的 id 选择器。

【参考方案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 特定。

【参考方案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>

【讨论】：

应该是正确的答案，因为它解决了问题。