为什么这个 11 class 选择器不如 ID 明确？

Question

#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>

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

样式属性：1,0,0,0 编号：0,1,0,0 Class，伪class，属性选择器：0,0,1,0 元素：0,0,0,1

Answer 1

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

样式属性：1,0,0,0
ID：0,1,0,0
Class,pseudo-class,属性选择器:0,0,1,0
元素：0,0,0,1

The commas are there to remind us that this isn't really a "base 10" system, in that you could technically have a specificity value of like 0,1,13,4 - and that "13" doesn't spill over like a base 10 system would.

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

class 选择器的任何组合 永远不会 覆盖单个 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 */
}

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

Answer 2

正如上面的 commented/answered，ID 总是会赢，但这里有一个技巧可以让你的 classes 赢。

#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; 
}

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

当我们知道 pseudo-classes 比 ID 更不具体时，为什么这有效？

仅仅是因为 :not() 本身 不会像其他 pseudo-classes 那样 向特异性数字添加任何内容。然而，选择器 within the :not() do.^ref

所以这就像我为我的 class 选择器添加了一个 ID。

为什么这个 11 class 选择器不如 ID 明确？

Why is this 11 class selector less specific than the ID?

css

css-selectors

css-specificity