css - :not() selector not behaving the same between Safari and 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() 选择器，并且我使用 Safari 进行开发，因此当我在 Chrome 上发现我的网站时，我差点心脏病发作。对于为什么会发生这种奇怪行为的任何解释，我们将不胜感激。

Answer 1

Safari 最近发布了 level 4 version of :not() ，它允许复杂的参数选择器，把它放在on par with jQuery's hitherto non-standard implementation .查看release notes . current incarnation of :not()只允许一个简单的选择器作为参数，因此像 p div 这样的复杂选择器在设计上无法在当今的浏览器中工作。

复杂选择器是由一个或多个复合选择器组成的表达式，这些选择器由组合符分隔，例如 descendant、>、~ 和 +。复合选择器是一个或多个简单选择器的序列。 div是由一个简单选择器组成的复合选择器，p div是由两个复合选择器(每个复合选择器由一个简单选择器组成)组成的复合选择器，由后代组合器。

目前还不知道这何时会出现在其他浏览器中，尽管 :not() 的新规范此时不太可能改变——当前的 4 级定义是 no-更明智，如果最初的 WebKit 变种足够大胆地实现它，那么它进入其他变种(包括 Blink)只是时间问题。

自 FPWD 以来经过将近 5 年的艰苦等待，我们可能很快就会真正看到 4 个选择器的 CR。认为我很兴奋。