html - CSS :not() を正しく使用するには?

Question

:not()疑似クラスを調べて、そこで例を試しました。興味深いことに、ローカルコンピューターと MDN サイトでは見た目が異なります。

jsFiddleと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>

出力：

いくつかのテキスト。<-- これは赤です。

他のいくつかのテキスト。<-- これは緑?! （黒またはデフォルトの色である必要があります）

もう 1 つのテキスト <-- これは緑色です。

要素を調べたところ、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セレクターの特異性はCSSの単純なものよりも高いため、body実際にはデフォルトの色をで設定する必要があります

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