Question

我很难弄清楚为什么以下代码在Safari中呈现蓝色，但在Chrome和Firefox中呈现红色。

require()

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

https://jsfiddle.net/hzcLpf9L/

显然，Chrome和Firefox似乎不支持其中包含多个级别的<p> <em>FOO</em> </p> 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这样的复杂选择器无法在今天的浏览器中设计。

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

目前还不知道何时会出现在其他浏览器中，尽管此:not()的新规范不太可能在此时发生变化 - 目前的4级定义是不费吹灰之力的如果原始的WebKit应变大胆地实现它，那么在它进入其他应变（包括Blink）之前它只是时间问题。

自FPWD以来，经过近五年的艰苦等待，我们实际上可能最终很快就能看到CR选择器4。考虑我抽水。

Answer 2

来自the spec：

否定伪类，不是（X），是一个功能符号，它将简单选择器（不包括否定伪类本身）作为参数。它表示一个未被其参数表示的元素。

和elsewhere in the spec：

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

Chrome和Firefox的行为是正确的。后代组合子可能不会出现在一个简单的选择器中（因此，a：not pseudo-class）

这可能会在选择器级别4中发生变化。当前editor's draft允许更复杂的选择器。您似乎遇到了实验性实施。

：not（）选择器在Safari和Chrome / Firefox之间的行为不一样

2 个答案: