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

:not() Safari、Chrome 和 Firefox 之间的选择器差异

浏览器通常会实现具有不同功能的功能，从而导致渲染差异。 CSS :not() 选择器就是这样一种情况，它在 Safari、Chrome 和 Firefox 中表现出不同的行为。

问题：

:not()在参数中指定多个级别时，选择器无法按预期工作。在此示例中：

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

Safari 将文本呈现为蓝色，而 Chrome 和 Firefox 使用红色。

原因：

根本原因是 Safari 最近实现的 4 级 :not() 选择器，它允许复杂的选择器作为参数。另一方面，Chrome 和 Firefox 在当前版本的 :not() 中仅支持单级参数。

说明：

复杂选择器包含多个由组合符分隔的复合选择器（例如，后代、兄弟）。在本例中，“p div”是一个复杂选择器，由两个复合选择器（“p”和“div”）组成，由后代组合器分隔。

预期行为：

根据 :not() 的 4 级规范，选择器应将“blue”规则应用于不在“div”元素内的任何“em”元素，无论它是否嵌套在“p”元素内。

当前状态：

预计 Chrome 和 Firefox 最终将采用新规范，从而导致跨浏览器的一致行为。在那之前，开发人员应该意识到在这些浏览器中使用具有多个级别的 :not() 选择器时可能存在的差异。

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