为什么 Safari 中的 `:not()` 选择器与 Chrome 和 Firefox 中的行为不同？

:not() 选择器差异：Safari 与 Chrome/Firefox

:not() CSS 选择器，用于从列表中排除特定元素与 Chrome 和 Firefox 相比，Safari 中的选择行为有所不同。这种差异给开发人员带来了困惑，促使他们对其根本原因进行调查。

根据最近的观察，Safari 现在完全支持 :not() 的 4 级规范，该规范允许在其参数中使用复杂的选择器。此功能使其与 jQuery 的实现保持一致。但是，Chrome 和 Firefox 目前仅支持简单选择器作为 :not() 的参数。

:not() 选择器异常源于在括号内使用复杂选择器。复杂选择器由多个由组合器连接的简单选择器组成，例如后代、相邻同级和一般同级。在提供的代码片段中，选择器 p div 表示一个复杂选择器，因为它将两个简单选择器（p 和 div）与后代组合器组合在一起。

由于 Chrome 和 Firefox 不支持 :not( 的复杂选择器) 参数，所提供代码中的 p div 部分无法识别。因此，:not() 选择器实际上被忽略，并且后备规则 em:not(...) 适用。此后备规则将红色指定为所有 元素的颜色，它是 Chrome 和 Firefox 中观察到的红色文本的原因。

相反，Safari 支持 :not() 中的复杂选择器，正确排除

中的 元素红色规范中的元素。这会导致 Safari 中显示蓝色文本。

目前，Chrome 和 Firefox 何时支持 :not() 复杂选择器的时间表仍不确定。然而，Safari 中 4 级规范的实现是一项重大发展，使其与最新的 Web 标准保持一致，并为 CSS 选择器提供了增强的功能。

以上是为什么 Safari 中的 `:not()` 选择器与 Chrome 和 Firefox 中的行为不同？的详细内容。更多信息请关注PHP中文网其他相关文章！