首页 > web前端 > css教程 > 为什么 Safari 中的 `:not()` 选择器与 Chrome 和 Firefox 中的行为不同?

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

DDD
发布: 2024-11-27 09:03:11
原创
652 人浏览过

Why Does the `:not()` Selector Behave Differently in Safari Compared to Chrome and 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板