Question

我只是抬起:not()伪类并在那里尝试了这个例子。有趣的是，它在我的本地计算机上看起来与在MDN站点上看起来不同。

p:not(.classy) { color: red; }
:not(p) { color: green; }

<p>Some text.</p>
<p class="classy">Some other text.</p>
<span>One more text</span>

输出：

一些文字。＆lt; - 这是红色的。

其他一些文字。＆lt; - 这是绿色的？！（它应该是黑色或任何默认颜色）

还有一个文字＆lt; - 这是绿色的。

在检查元素时，我发现Some other text以某种方式继承了body的绿色，受:not(p)影响。

那么为什么MDN网站会正确显示它？这是技巧：

<p style="color: red;">Some text.</p>
<p>Some other text.</p>
<p style="color: green;">One more text</p>

所以我的问题是，如何正确使用:not() 并阻止继承导致意外结果？

Answer 1

实际上，两者都是正确的。 ;）在jsFiddle中，首先尝试定义默认颜色，如

body { color: blue; }

现在，body没有特殊的颜色集，因此:not(p)也适用于body，p.classy继承了body的颜色。

有关更新示例，请参阅http://jsfiddle.net/3Jqxr/1/。

编辑：由于:not选择器的特定性高于CSS中的简单body，因此您实际上必须使用

设置默认颜色

body:not(p)

这个例子。

Answer 2

由于您没有为<p>设置默认值，因此您的<p class="classy">元素会从正文继承。您可能希望从规则集中排除<body>：

body :not(p) { color: green; }

或者，您可以设置默认值：

p{ color: black; }
p:not(.classy) { color: red; }
:not(p) { color: green; }