嵌套 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，而不必使用黑客来增加选择器的特异性，例如.weird-font。我宁愿使用 hack 来降低 .special-section p 的特异性，也不愿使用 hack 来增加 .weird-font 的特异性。有没有办法做到这一点？

Answer 1

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

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

但正如您所见，它是一个滑动比例。所以那些大师可能是对的。如果您要删除.special-section p，而是给这些P 自己的选择器.special-section-para 或其他东西，那么您就不会有这个问题。

但就个人而言，我不介意时不时地添加一个像上面那样的例外。我认为整个特殊性都是为了这个目的，如果你需要一个更具体的选择器来设置样式，对我来说这似乎是正确的做法。

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

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

Answer 2

作为一名 CSS 专家，我很遗憾放弃选择器必须提供的所有内容，以避免出现特殊性问题。这并不是说我不相信特异性机制有缺陷，但肯定有不那么引人注目的解决方法。

首先：不，您不能降低选择器的特异性。选择器不提供任何具有负特异性水平的特征，这些特征会以这种方式降低特异性。您可以使用的最低值是*，它具有零 特异性（即它不会使复杂的选择器变得或多或少地具有特定性）。

所以你在选择器级别上唯一的办法就是增加它。不使用 hack 是否可以做到这一点取决于您对“hack”的定义。

以下是我认为的 hack，因为它使用了一个语法上合法但语义上无意义的选择器，例如 :not(_)，它没有明显的目的，只是将类型选择器的特殊性添加到复杂选择器（即远非显而易见，尤其是外行）：

.special-section p { }
.weird-font, :not(_).weird-font { }

以下内容不是我认为是 hack，因为这是你通常会做的事情。几乎唯一的“问题”是它明显重复了单独的类选择器：

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

如果您为了提高特异性而将任何类型的无关选择器视为 hack（这是一个完全合理的 POV，请不要误会），那么 不是 hack 的下一个最好的事情是!important.

就个人而言，我会选择一种特异性破解。 !important 有，咳咳，重要的影响，不附带特异性黑客 - 请记住 !important and specificity have different semantics。例如，您不能使用内联样式或 JavaScript 覆盖 !important 声明，除非它们也被标记为重要。¹

---

¹_{事实上，这是我对 Lea Verou 的回应，当时她有一个 discussion on Twitter 与 !important 相比的特异性黑客攻击。}

Answer 3

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

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

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

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

spec 仍然称这个特殊的伪类为:something()，但chances are it's going to be called :where()。 （旁注：我真的want这被称为“蜜獾选择器”）。

但这仍是未来。

然而，如果您不再需要支持 IE（或者对不太完美的回退感到满意），实际上有一种方法可以实现这一点今天 )，即使用custom properties aka 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); }

如果你在现代浏览器中运行下面的 sn-p，你应该注意到第二段是红色的，因为它在一个特殊的部分，但第三段是洋红色的，因为它是 .weird-font -- 即使@ 987654333@ 具有 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 4

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

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

如果必须，我当然会。但是以上面的例子为例，如果我想为使用此类的特定元素覆盖 .child，其样式可能如下所示：

.child {
   color: black;
}

如果可能的话，我会去上面的一位家长覆盖它：

.father .child {
   color: white;
}

再往下说，如果特定页面上的元素使用.child 类，在这种情况下我需要同时覆盖.father .child，我将再上一层：

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

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