为什么 Safari 和 Chrome/Firefox 在处理多级 `:not()` 选择器方面存在差异？

测试 :not() 选择器跨浏览器：Safari 与 Chrome/Firefox 中的怪癖

在最近的查询中，开发人员遇到了与 Chrome 和 Firefox 相比，在 Safari 中使用 :not() 选择器时会出现不一致。通过调查此案例，我们发现这些浏览器在 :not() 中处理多级选择器的方式存在差异。

Safari 不断发展的 :not() 实现

Safari 有最近实现了 :not() 的 4 级规范，它引入了对复杂选择器作为参数的支持。这允许更复杂的选择器嵌套，例如定位不是特定父级后代的元素。

Chrome/Firefox 的多级限制：not()

相比之下，Chrome 和 Firefox 目前仅支持 :not() 内的单级选择器。这些浏览器无法识别复杂的选择器，例如“p div”。这是由于 CSS 规范和浏览器实现的差异造成的。

潜在错误报告

开发人员对多级 :not() 的不同渲染行为的观察Safari 中的选择器可以被视为一个潜在的错误。 Chrome 和 Firefox 可能应该更新以遵循最新的 CSS 规范并支持更复杂的 :not() 参数。

对开发人员的影响

依赖的开发人员在其 Web 应用程序或样式表的复杂 :not() 选择器上应该意识到这种跨浏览器的不一致。如果需要与旧版浏览器兼容，则可能需要使用替代选择器模式或使用填充来确保跨浏览器的一致渲染。

预期更改

情况是随着浏览器采用最新的 CSS 规范，它可能会不断发展。预计 Chrome 和 Firefox 最终将实现 :not() 的全部功能并提供多级支持。这会将跨浏览器兼容性带到最前沿，并允许更具表现力和更高效的 CSS 选择器。

以上是为什么 Safari 和 Chrome/Firefox 在处理多级 `:not()` 选择器方面存在差异？的详细内容。更多信息请关注PHP中文网其他相关文章！