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 selector。除了重构之外还有其他解决方案吗？

Answer 1

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

如果你不能重构，你可能会伪造一个虚假的条件：因此它们将具有相同的优先权，从而恢复到文档顺序：

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

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

Answer 2

在您的第一个示例中，.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 3

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

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，用于了解如何计算特异性，让您“选择”“玩”。

：not selector正在更改等效选择器

3 个答案: