认识 `:has`，一个原生的 CSS 父选择器

经常被引用的导致容器查询难以或无法实现的原因是诸如无限循环之类的问题——例如，更改元素的宽度，使容器查询失效，这又会再次更改宽度，从而使容器查询生效，等等。但这个问题已通过包含性得到解决。“父选择器”，或现在已被 正式称为 的 :has（我喜欢它，这就是 jQuery 的做法，尽管 Adrian 指出 一条推文 指出它更加通用），传统上也存在类似的问题。例如，需要“多次传递”渲染，这速度太慢，无法接受。

Brian Kardell 说

主要的是，即使没有 :has() ，也很难达到 CSS 的性能保证，其中所有内容都继续以 60fps 的速度“实时”评估和渲染。如果你从数学角度思考，仅仅在 DOM 发生变化时（包括解析时）应用数百或数千条规则在概念上涉及多少工作，这本身就是一个壮举。

引擎已经找到了如何根据巧妙的模式和观察结果来优化这一点，从而避免了在概念上必要的工作——其中很多工作都是基于这些主题不变量，而 has() 似乎会打破这些不变量。

现在有一个规范的事实非常令人鼓舞，并且 Igalia 也关注它。显然，一些性能问题要么已被克服，要么通过测试确定其可忽略不计，足以成为一个可交付的功能。

Adrian Bece 深入探讨了 所有这些问题！

Igalia 团队已经开发了一些著名的 Web 引擎功能，例如 CSS 网格 和 容器查询，因此 :has 选择器有机会问世，但仍有很长的路要走。

是什么让关系选择器成为过去几年中最受欢迎的功能之一，开发人员是如何解决缺少选择器的问题的？ 在本文中，我们将回答这些问题，并查看 :has 选择器 的早期规范，以及它在发布后如何改进样式工作流程。

让我们拭目以待。我已经 关注了 10 年，并尝试 记录用例。

直接链接 →