:not 选择器正在改变等效选择器的评估顺序[重复]

Question

我有一个问题，我在一个相当大的 CSS 代码库中工作，该代码库经常使用覆盖先前定义的类/选择器。因此，它对它们的定义顺序非常敏感。

这是我需要它如何工作的示例

.grid {
   padding:25px;
   background-color: red;
}

.grid {
  padding:50px;
  background-color: green;
}

<li>
   <div class="grid">
     Test
   </div>
</li>

注意第二个.grid 定义如何覆盖第一个。

这就是现在发生的事情：

.grid:not(.ui) {
   padding:25px;
   background-color: red; 
}

.grid {
  padding:50px;
  background-color: green;
}

<li>
   <div class="grid">
     Test
   </div>
</li>

使用:not 伪类悬停将评估的优先级移动到正常类定义之后。我需要以与以前相同的顺序对其进行评估，但我需要 :not 选择器。除了重构还有什么解决办法吗？

Answer 1

在您的第一个示例中，.grid 选择器的每个选择器的特异性值为 10 (classes = 10)。因此，由于两个规则具有相同的特异性，它们的源顺序决定。

在您的第二条规则中，.grid:not(.ui) 的特异性值为 20 (2 classses; the :not() pseudo-class has no specificity value)。源顺序是从属的，因为规则具有不同的特异性值。

因此，为了实现您的目标（与之前相同的行为，但将:not() 应用于第一条规则），您需要将第二条规则的特异性提高至少 10 倍。

一种方法是在第二条规则中添加一个无用的:not()。此方法在another answer 中有描述，并且是规范允许的：

6.6.7. The negation pseudo-class

注意：:not() 伪允许编写无用的选择器。为了 实例:not(*|*)，它根本不代表任何元素，或者 foo:not(bar)，相当于foo，但更高 特异性。

.grid:not(.ui) {
   padding:25px;
   background-color: red; 
}

.grid:not(.bar) {
  padding:50px;
  background-color: green;
}

<div class="grid">Test</div>

specificity calculator

Answer 2

你只需要让你想要优先的选择器比另一个更具体。如果您向元素添加一个“虚拟”类，您可以将该类添加到您的第二个选择器以使其更具体（或者至少在最后一个选择器获胜的地方打成平手）。

CSS 特异性计算如下：

1000 分用于内联样式 选择器中的 id 得 100 分 选择器中的类或伪类 10 分 选择器中的元素或伪元素 1 分

在你的情况下：

.grid:not(.ui)

值 20 分，因为选择器中有 1 个类和一个伪类。

但是：

.grid

因为只有一门课才值10分。

/* This selector is worth 20 points */
.grid:not(.ui) {
   padding:25px;
   background-color: red; 
}

/* This selector is also worth 20 points, but becomes it comes 
   after the other one, the location breaks the tie. */
.grid.special {
  padding:50px;
  background-color: green;
}

<li>
   <!-- Adding another "dummy" class to the element allows you
        to correctly find it with your CSS, and do it with a more
        specific selector, if needed. -->
   <div class="grid special">
     Test
   </div>
</li>

而且，如果您（出于某种原因）需要颠倒选择器的顺序怎么办？只需将假设“获胜”的那个更具体一点：

/* This selector is worth 21 points */
div.grid.special {
  padding:50px;
  background-color: green;
}

/* This selector is worth 20 points */
.grid:not(.ui) {
   padding:25px;
   background-color: red; 
}

<li>
   <!-- Adding another "dummy" class to the element allows you
        to correctly find it with your CSS, and do it with a more
        specific selector, if needed. -->
   <div class="grid special">
     Test
   </div>
</li>

这里是a great site，用于了解如何计算特异性，让您“玩”选择器。

Answer 3

:not 规则更具体，因此优先级更高。

如果你不能重构，你也可以在另一个规则上加上一个虚假的 :not 条件，这样它们就会有相同的优先级，从而恢复到文档顺序：

.grid:not(.ui) {
   padding:25px;
   background-color: red; 
}

.grid:not(.nonexistentclassname) {
  padding:50px;
  background-color: green;
}

<li>
   <div class="grid">
     Test
   </div>
</li>