让我们来做个实验, 我们声明一个 html 节点:

<div>
  <div id="testId" class="testClass"><span>test div</span></div>
</div>
复制

在 css 中我们添加两个选择器:

.testClass.testClass {
  background-color: red;
}
.testClass {
  background-color: black;
}
复制

如果重复的 css selector 会被忽略的话, 按照前面的规则, 最后声明的 css selector 会生效, 所以 这个 div 节点背景色应该是黑色. 让我们看看结果:

结果我们得到的是一个红色的 div, 也就是说 .testClass.testClass 高于 .testClass. 所以结论是: 重复的 css selector, 其权重会被重复计算.

如图：

让我们来做一个简单的测试:

按照图片中的计算公式: 如果一个 css 选择器包含11 个 class selector type, 另一个选择器是1 个 id selector type. 那么 class 选择器的权重会高于 id 选择器的权重. 让我们来试一试:

.testClass.testClass.testClass.testClass.testClass.testClass
  .testClass.testClass.testClass.testClass.testClass {
  background-color: red;
}
#testId {
  background-color: black;
}
复制

让我们看看结果:

结果显示还是 id 选择器权重更高.

实际上，"两个类名重复"并不意味着权重增加，而是指选择器变得更具体、更具有特异性。在 CSS 选择器中，重复的类名只是意味着元素需要同时具备这两个类名才会匹配该选择器，这增加了匹配条件的严格程度，而非直接增加权重。

在您的例子中：

• .testClass.testClass 意味着元素需要同时拥有两个类名 ".testClass"，这种情况下，由于这个选择器比 .testClass 更具特异性，所以它会覆盖 .testClass 的样式。

• 而多个类选择器（如 .testClass.testClass.testClass...）相对于一个 ID 选择器（如 #testId），即使类选择器数量再多，其总体特异度仍然低于 ID 选择器。这是因为 ID 选择器的特异度固定为 100 分，而每个类选择器仅为 10 分，所以无论类选择器的数量是多少，都无法超越 ID 选择器的特异度。

总结来说，同级别内的选择器，增加类名的匹配条件确实可以增加特异度，但无法通过简单地重复类名来跨越类选择器与 ID 选择器之间的特异度差距。类选择器的数量多少不改变其单位特异度得分，而 ID 选择器的特异度始终高于类选择器。