嵌套CSS选择器而不增加特异性

Question

让我们把这三个选择器从最高的特异性排序到最低的选择器：

.special-section p { }
.weird-font        { }
p                  { }

许多CSS专家建议不要像第一个选择器.special-section p那样嵌套，因为它的特异性很高，所以不能用像.weird-font这样的简单类覆盖它。我想找到一种方法来实现像.special-section p那样的嵌套，但不增加特异性。就像这样：

 .weird-font { }
 .special-section p /* with hack to decrease specificity */ { }
 p { }

用例：

使用简单的选择器(如p )为字体和文档范围应用默认值是非常安全的。但是，我希望为类似于.special-section p的特定部分更改这些默认值，而不必使用hacks来增加选择器(如.weird-font )的特异性。我宁愿使用hack来降低.special-section p的特异性，也不愿使用hack来提高.weird-font的特异性。有办法这样做吗？

Answer 1

如今，2018年，这已接近可能。

首先，CSS4将有一种方式允许您在不增加特异性的情况下创建更具体的选择器：

:where(.special-section) p {
    color: red;
}

这将将.special-section中的段落颜色设置为红色，但其特异性为001 (即与普通的p选择器具有相同的特异性)。

等级库仍然调用这个特殊的伪类:something()，但是:where()。(旁注:我真的想要这个被称为“蜂蜜獾选择器”)。

但那还在未来。

然而，如果您不需要再支持IE (或者对不太完美的退路感到高兴)，那么现在实际上有一种方法可以实现这一点，那就是使用自定义属性 a.k.a。CSS变量

所以你想要这个

.special-section p { color: red; }
.weird-font        { color: magenta; }
p                  { color: green; }

但是第一部分的特异性比任何有类的选择器都要低。你可以这样做：

.special-section p { --low-specificity-color: red; }
.weird-font        { color: magenta; }
p                  { color: var(--low-specificity-color, green); }

如果你在现代浏览器中运行下面的代码片段，你应该注意到第二段是红色的，因为它在一个特殊的部分，但是第三段是洋红色，因为它是.weird-font --尽管.weird-font具有010的特性，.special-section p有011。

​

.special-section p { --low-specificity-color: red; }
.weird-font        { color: magenta; }
p                  { color: var(--low-specificity-color, green); }

<p>This is a paragraph.</p>

<section class="special-section">
   <p>This is a paragraph inside a special section.</p>
   <p class="weird-font">This is a paragraph with a weird font inside a special section.</p>
</section>

   <p class="weird-font">This is a paragraph with a weird font.</p>

   <div class="weird-font">This is a div with a weird font.</div>

​

这是因为当--low-specificity-color用011的特异性改变时，它只应用于001的特异性。

Answer 2

您不能降低专用性，但是可以为异常添加更具体的选择器。

.weird-font, /* Normal weird font */
.special-section p.weird-font /* Override for special section */ 
  { }

但正如你所看到的，这是一个滑动的尺度。所以那些古鲁可能是对的。如果您要删除.special-section p，而给这些P的选择器.special-section-para或其他什么，那么您就不会有这个问题。

但就我个人而言，我并不介意偶尔添加一个像上面这样的例外。我认为所有的细节都是为了这个目的，如果你需要一个更具体的选择来设计一些东西，对我来说，这似乎是正确的事情。

一个常见的解决方案是使用!important。问题是！重要的是只有一个级别的覆盖。如果您做了一个更具体的选择器，您可以再次用更具体的选择器覆盖它。吸毒之后！重要的是，你没有选择了。更重要的是，使用!important可能会干扰用户为提高可读性而拥有的特殊样式表。因此，我从不在这种情况下使用!important。

但话又说回来，我不认为自己是CSS大师。;)

Answer 3

我喜欢像一样具体，目前必需的。我确实喜欢为将来的CSS更改留出空间，所以不要为了它而尽可能具体，例如：

.great-grandfather .grandfather .father .child { }

如果有必要的话我会的。但是，以上面的例子为例，如果我想覆盖使用这个类的特定元素的.child，它的样式可能如下所示：

.child {
   color: black;
}

如果可能的话，我会去上面的父母之一重写它：

.father .child {
   color: white;
}

接下来，如果一个特定页面上的元素使用.child类，在本例中我需要覆盖两个.father .child，那么我将再进行一个级别的专用性：

.grandfather .father .child {
   color: red;
}

这样做可以确保您不需要使用!important.我尽量避免像瘟疫一样！