:not() 选择器在 Safari 和 Chrome/Firefox 之间的行为不同

Posted 2023-03-06

【中文标题】:not() 选择器在 Safari 和 Chrome/Firefox 之间的行为不同

【英文标题】：:not() selector not behaving the same between Safari and Chrome/Firefox

【发布时间】：2016-06-29 20:33:36

【问题描述】：

我很难弄清楚为什么以下代码在 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 上发现我的网站时，我差点心脏病发作。任何关于为什么会发生这种奇怪行为的解释都将受到高度赞赏。

【问题讨论】：

这不是错误，只是他们尚未实现的新功能。

【参考方案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 以来，经过将近五年的艰苦等待，我们实际上可能很快就会真正看到 selectors-4 的 CR。认为我很兴奋。

【讨论】：

所以从最新的 boostrap 中删除的以下表达式被破坏：.btn-group > .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn-group:not(:last-child) > .btn ...styles here...

@Brian Sweeney：对不起，你能澄清一下吗？它是在浏览器中损坏还是 Bootstrap 作者写的不正确？

如果我理解你的答案，那么它不是应该出现在 booststrap css 中的表达式，因为它不适用于所有浏览器。这有意义吗？

@Brian Sweeney：这些选择器符合第 3 级，因为每个 :not() 仅包含一个参数，并与其各自的 .btn 或 .btn-group 类选择器链接在一起，没有组合器，这与此处描述的问题不同。

【参考方案2】：

来自the spec：

否定伪类:not(X) 是一个以简单选择器（不包括否定伪类本身）作为参数的函数式表示法。它表示一个没有由它的参数表示的元素。

和elsewhere in the spec:

简单选择器可以是类型选择器、通用选择器、属性选择器、类选择器、ID 选择器或伪类。

---

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

---

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