应用容器、虚拟机工具

CSS :has() 父级选择器与关系查询

嗨,我是芦苇Z 👋。

在前端开发中,我们经常会遇到以下需求:

  • 父元素样式依赖子元素状态 —— 如导航栏中,父级 <li> 需根据子 <a> 是否 .active 来高亮。
  • 布局随内容变化 —— 比如 CSS Grid 容器在子元素数量超过阈值时切换列数。
  • 交互驱动父级样式 —— 表单验证时,父级 <form> 根据内部 <input> 的合法性改变状态。

过去,这类场景往往只能靠 JavaScript:通过 DOM 遍历查询子元素,再手动给父元素加 class。这样不仅增加代码量,也让逻辑分散在 CSS 与 JS 之间,降低可维护性。