为什么这个 11 类选择器不如 ID 特定？ [复制]答案

【问题标题】：Why is this 11 class selector less specific than the ID? [duplicate]为什么这个 11 类选择器不如 ID 特定？ [复制]
【发布时间】：2018-09-19 09:13:29
【问题描述】：

#box {
  width: 100px;
  height: 100px;
  background-color: #ff0;
}

.one.two.three.four.five.six.seven.eight.nine.ten.eleven {
  background-color: #f00;
}


<div id="box" class="one two three four five six seven eight nine ten eleven"></div>

如果对每种类型的选择器都给出以下几点，那么上面的类选择器怎么没有覆盖ID选择器呢？

样式属性：1,0,0,0 编号：0,1,0,0 类、伪类、属性选择器：0,0,1,0 元素：0,0,0,1

【问题讨论】：

无论你有多少类，它仍然是：类

标签： css css-selectors css-specificity

【解决方案1】：

因为 CSS specificity point system 与您指定的完全一样：

样式属性：1,0,0,0
ID：0,1,0,0
类、伪类、属性选择器：0,0,1,0
元素：0,0,0,1

逗号是为了提醒我们，这并不是真正的“以 10 为基数”的系统，因为从技术上讲，您可以具有像 0,1,13,4 这样的特异性值 - 而“13”则不是像base 10系统一样溢出。

您的 ID 选择器是 0,1,0,0，您的组合类选择器是 0,0,11,0。

类选择器的任何组合永远都不会覆盖单个 ID 选择器，如下所示：

#box {
  width: 100px;
  height: 100px;
  background-color: #ff0; /* yellow */
}

.one.two.three.four.five.six.seven.eight.nine.ten.eleven {
  background-color: #f00; /* red */
}

&lt;div id="box" class="one two three four five six seven eight nine ten eleven"&gt;&lt;/div&gt;

【讨论】：

我猜他知道这件事，不是吗？这里已经在他的问题中添加了要点
OP 询问“如果对每种类型的选择器都给出以下几点，那么上面的类选择器为什么没有覆盖 ID 选择器？”。答案是因为它不是以 10 为基数的系统，而且分数不会“溢出”。因此，超过 10 个类不会覆盖单个 ID。
这句话确实是 OP 问题的答案：它不是以 10 为基础的计算，10 classes != 1 ID。
感谢@ObsidianAge，这让它更清楚了一点，但我不太明白为什么组合类选择器是 0,0,11,0？
@bernk 十一班 == 1 + 1 +1 ... +1 = 11

【解决方案2】：

正如上面评论/回答的那样，ID 总是会赢，但这里有一个技巧可以让你的课程赢。

#box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

.one.two.three.four.five.six.seven.eight.nine.ten.eleven:not(#random_id) {
  background-color: red; 
}

&lt;div id="box" class="one two three four five six seven eight nine ten eleven"&gt;&lt;/div&gt;

当我们知道伪类不如 ID 特定时，为什么这会起作用？

仅仅是因为:not() 本身不会像其他伪类那样在特异性数上添加任何内容。但是，:not() 中内的选择器可以。^ref

所以这就像我在我的类选择器中添加了一个 ID。

【讨论】：

或者直接使用!important。
@ibrahimmahrir 是的，但是因为它是关于具体性和点的，所以我想分享一个技巧，让最后一个更具体地考虑点。
@TemaniAfif 你能解释一下为什么会这样吗？
@bernk 我添加了解释 ;)