：not（）セレクタがSafariとChrome/Firefoxの間で同じように動作しない

Question

次のコードがSafariでは青でレンダリングされるのはなぜか、ChromeとFirefoxでは赤でレンダリングされるのはかなり困難です。

em:not(div) { 
 
    color: red 
 
} 
 
em:not(p div) { 
 
    color: blue 
 
}

<p> 
 
    <em>FOO</em> 
 
</p>

https://jsfiddle.net/hzcLpf9L/

ChromeとFirefoxはその中の複数のレベルを持つ:not() CSSセレクタをサポートしていないようどうやらそれが見えます。 （可能性のあるバグ？）

私は:not()セレクタの非常に好きだと私はサファリで開発し、私はChromeで私のウェブサイトを発見したときので、私はほとんど心臓発作を起こしました。なぜこの奇妙な行動が起こるのかについての説明は高く評価されるでしょう。 the specから

Answer 1

Safariは、最近それon par with jQuery's hitherto non-standard implementation入れて、引数の複雑なセレクタを可能にlevel 4 version of :not()を、出荷しました。 release notesを参照してください。 current incarnation of :not()では、引数として単一のセレクタしか使用できないため、今日のブラウザではp divのような複雑なセレクタは設計通りには動作しません。

コンプレックスセレクタは、子孫のようなコンバイナによって区切られた1つ以上の化合物セレクタからなる式です。>,~および+です。複合セレクタは、1つまたは複数のシンプルセレクタのシーケンスです。 divは、1つの単純なセレクタからなる複合セレクタであり、p divは、2つの複合セレクタ（それぞれが1つの単純なセレクタで構成されています）から成り、子孫コンビネータで区切られた複合セレクタです。

それは、この時点では変更されます:not()の新しい仕様がそうですけれども、これは、他のブラウザに着陸する予定際にそれが現在知られていない - 現在のレベル4の定義は非常に簡単ではありませんし、オリジナルのWebKitの株は大胆されている場合それを実装するのに十分であれば、それは実際には他の系統（瞬きを含む）に入る前の時間の問題です。

FPWDから5秒ほど待っているうちに、すぐに実際にセレクタ4のCRが表示されるようになりました。私はポンピングしてください。

Answer 2

：

否定擬似クラス：ていない（X）は、引数として単純セレクタ（否定擬似クラス自体を除く）をとる関数表記です。引数で表されていない要素を表します。

とelsewhere in the spec：

単純セレクタは、タイプセレクタ、普遍的なセレクタ、属性セレクタ、クラスセレクタ、IDセレクタ、又は擬似クラスのいずれかです。

---

ChromeとFirefoxのの行動は正しいです。子孫結合子は、単純なセレクタに表示されないこと（したがって、：しない擬似クラス）

---

これは4電流editor's draft、より複雑なセレクタを可能にするセレクタレベルの変化もよいです。あなたは実験的な実装に遭遇したようです。