为什么这个11类选择器不如ID特定？

Question

(?P<key_values_pair>^(?P<text>\w+)\s*=\s*\[(?P<values>[a-zAZ]\d;?)+\])

如果给每种类型的选择器以下几点，那么上面的类选择器怎么不覆盖ID选择器？

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

Answer 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,1,3的特异性值 - 而“13”不具备溢出就像基地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 */
}

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

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

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

当我们知道伪类的特定性不如ID时，为什么会这样？

仅仅因为:not()本身不会像其他伪类那样添加任何特定数字。但是，:not()内的选择器 。 ^ref

所以就像我在班级选择器中添加了一个ID。