为什么 Safari、Chrome 和 Firefox 使用 CSS `:not()` 选择器显示不同的结果？

:not() 选择器在 Safari、Chrome 和 Firefox 中的差异

:not() 选择器用于选择不匹配的元素与一组指定的选择器不匹配。但是，此选择器在不同浏览器中的行为方式可能会不一致，如以下代码所示：

em:not(div) {
    color: red
}
em:not(p div) {
    color: blue
}

<p>
    <em>FOO</em>
</p>

在 Safari 中，上述代码将“FOO”文本呈现为蓝色，而在 Chrome 和 Firefox 中，它呈现为红色。此行为是由于 Safari 中最近的更新实现了 :not() 的 4 级版本，这使得它能够处理更复杂的选择器。

在 :not() 的当前实现中，只有单个简单的选择器支持选择器作为参数。当前设计不支持复杂的选择器，例如“p div”。因此，在 Chrome 和 Firefox 中，:not(p div) 规则无法应用，并且“FOO”文本按照第一条规则继承红色。

然而，Safari 实现了更高级的功能4 级规范，允许 :not() 参数使用复杂的选择器。因此，:not(p div) 规则与“FOO”元素匹配，从而产生蓝色。

这种差异凸显了开发跨浏览器兼容网站时的潜在挑战和注意事项。随着新版本的浏览器引入更新的 CSS 规范，有必要跟踪浏览器兼容性和潜在的实现差异。

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