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

让我们采用这三个选择器，从最高特异性到最低特异性:

.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，而不必使用技巧来增加.weird-font之类的选择器的特殊性。我宁愿使用hack来降低.special-section p的特异性，也不愿使用hack来提高.weird-font的特异性。有没有办法做到这一点？

最佳答案

如今，在2018年，这几乎是有可能的。

首先，CSS4将提供一种允许您创建更多特定选择器而不增加特定性的方法:

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

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

spec仍称此特殊的伪类:something()，但称为chances are it's going to be called :where() 。 (旁注:我真的want这就是所谓的“蜜badge选择器”)。

但这仍然是 future 。

但是，如果您现在不再需要支持IE(或者对不尽人意的后备功能感到满意)，那么实际上今天就有一种方法可以做到这一点，那就是使用custom properties 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特异性。