CSS :not 选择器不起作用答案

【问题标题】：CSS :not selector doesn't workCSS :not 选择器不起作用
【发布时间】：2015-11-11 20:55:53
【问题描述】：

这可能是一个非常愚蠢的问题，但我无法让 :not 选择器在 css 中工作。我想为页面中的所有文本着色，除非它有一个名为“nocolor”的类。这是代码，我没有看到问题：

*:not(.nocolor) {
    color: #f00;
}

<h2>Hello</h2>
<h2 class="nocolor">Hello</h2>

【问题讨论】：

【解决方案1】：

我对这种行为感到惊讶，但 * 选择器适用于 所有内容，因此您还必须注意是否适用于父元素（如 body 和 html 标签本身）。

您可以通过将body 添加到选择器来修复它，如下所示：

body *:not(.nocolor) {
   color: red;
}

【讨论】：

【解决方案2】：

你的选择器应该这样写：

:not(.nocolor) {
    color: #f00;
}

删除“*”，这将选择页面上的所有内容。

在此处查看文档：MDN

【讨论】：

【解决方案3】：

这是因为* 应用于每个元素，包括body，它没有.nocolor 类。

【讨论】：