如何正確使用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

回答