: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()选择器,我使用Safari开发,因此当我在Chrome上发现我的网站时,我几乎心脏病发作.任何解释为什么这种奇怪的行为发生将受到高度赞赏.

Answer 1

Safari最近发布了4级版本:not(),它允许复杂的参数选择器,使其与jQuery迄今为止的非标准实现相提并论.请参阅发行说明.在目前的化身:not()只允许一个参数一个简单的选择,这样一个复杂的选择一样p div不会被设计在当今的浏览器.

复合选择器是由一个或多个化合物选择器组成的表达式,这些化合物选择器由组合子(如后代>,~和)分隔+.复合选择器是一个或多个简单选择器的序列.div是一个复合选择器,由一个简单的选择器组成,p div是一个复杂的选择器,由两个复合选择器组成(每个复合选择器由一个简单的选择器组成),由一个后代组合器分隔.

目前尚不清楚它何时会出现在其他浏览器中,尽管此时新规范不太可能:not()发生变化 - 当前的4级定义是不费脑子的,如果原始WebKit应变大胆实现它,然后它进入其他应变(包括Blink)之前只是时间问题.

经过FPWD近五年的艰苦等待,我们实际上可能很快就会看到一个CR选择器4.考虑我抽水.

Answer 2

从规格:

否定伪类,不是(X),是一个函数符号,它将一个简单的选择器(不包括否定伪类本身)作为参数.它表示一个未由其参数表示的元素.

以及规范中的其他地方:

简单的选择器是类型选择器,通用选择器,属性选择器,类选择器,ID选择器或伪类.

Chrome和Firefox的行为是正确的.后代组合子可能不会出现在一个简单的选择器中(因此,a:not pseudo-class)

这可能会在选择器级别4中发生变化.当前编辑器的草稿允许更复杂的选择器.您似乎遇到了实验性实施.