我很难弄清楚为什么以下代码在 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 上发现我的网站时，我差点心脏病发作。任何关于为什么会发生这种奇怪行为的解释都将受到高度赞赏。
【问题讨论】：
标签： css google-chrome firefox safari css-selectors
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 以来，经过将近五年的艰苦等待，我们实际上可能很快就会真正看到 selectors-4 的 CR。认为我很兴奋。
【讨论】：
.btn-group > .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn-group:not(:last-child) > .btn { ...styles here... }
来自the spec：
否定伪类:not(X) 是一个以简单选择器（不包括否定伪类本身）作为参数的函数式表示法。它表示一个没有由它的参数表示的元素。
简单选择器可以是类型选择器、通用选择器、属性选择器、类选择器、ID 选择器或伪类。
Chrome 和 Firefox 的行为是正确的。后代组合子可能不会出现在简单的选择器中（因此，一个 :not 伪类）
这可能会在选择器级别 4 中发生变化。当前的 editor's draft 允许更复杂的选择器。您似乎遇到了实验性实现。
【讨论】：