CSS :not选择器不起作用

Question

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

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

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

- Alex Wohlbruck

---

我真的很想知道为什么会这样。我测试过的每个浏览器都有相同的行为。我想这一定在规范中有所说明。 - Joseph Marikle

Answer 1

我对这种行为感到惊讶，但是星号选择器适用于所有元素，因此您还必须注意应用于父元素（例如body和html标记本身）的情况。

您可以通过将 body 添加到选择器中来修复它，像这样：

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

- Jack Guy

---

在 *:not() 选择器之前添加 * { color: #000; /* or whatever */ } 也可以起作用。 - Joseph Marikle

是否可以将not选择器应用于其中的所有子元素？如果我想要更改带有nocolor类的div中的p标签的颜色，但它不起作用。 - Alex Wohlbruck

使用@JosephMarikle的评论 - Jack Guy

Answer 2

你的选择器应该这样写：

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

去掉“*”符号，这将选择页面上的所有内容。

查看文档：MDN

- Cliff Ribaudo

Answer 3

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

- Martin van Driel