如何正确使用CSS：not（）？

我刚刚查找了:not()伪类，并尝试了那里的例子。有趣的是，我的本地计算机看起来不同于MDN网站。如何正确使用CSS：not（）？

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()正确，防止继承从导致意外的结果？

2013-02-12 Antony

其实两者都是正确的。 ;）在的jsfiddle，尽量先定义一个默认的颜色，像

body { color: blue; }

眼下，身体也没有什么特别的颜色设置，所以:not(p)适用于身体，也和p.classy继承车身颜色。

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

编辑：既然:not选择的特异性比CSS简单body更高，你确实有设置默认的颜色与

body:not(p)

的这个例子。

2013-02-12 12:53:37 Paul

RAWR，你在我之前得到它。 http://jsbin.com/uzujif/1/edit – estrar 2013-02-12 12:58:19

同样在这里...;） – jeroenvisser101 2013-02-12 12:59:00

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

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

或者，您可以设置默认：

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

2013-02-12 13:00:52

回答