：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进行了将近5年的苦苦等待之后，我们实际上可能很快就会真正看到选择器4的CR。考虑我抽。

Answer 2

因此，从最新的Boostrap滑过的以下表达式已损坏：.btn-group > .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn-group:not(:last-child) > .btn { ...styles here... }