html - 如何正确使用 CSS :not()？

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>

输出：

一些文字。<-- 这是红色的。

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

还有一个文本 <-- 这是绿色的。

在检查元素后，我发现它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() 正确使用，防止继承造成意外结果？

score 7 · Accepted Answer

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

body { color: blue; }

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

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

编辑：由于:not选择器的特异性高于bodyCSS 中的简单选择器，因此您实际上必须设置默认颜色

body:not(p)

对于这个例子。

score 0 · Accepted Answer

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

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

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

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

2 回答 2