CSS 子元素满足某个条件如何改变父元素样式？
· 6 min read
input:checked 改成父元素边框高亮、img 存在时父容器切两栏布局、表单校验状态动态联动——以前这些都需要 JS 去监听子元素状态再回头改父元素。:has() 的出现，把"子元素状态驱动父元素样式"这件事直接搬进了 CSS。
- 核心能力：
:has()是名副其实的父选择器，根据子元素/后代/兄弟的状态反向匹配父元素或前面的兄弟。 - 浏览器覆盖：Chrome 105+、Safari 15.4+、Firefox 121+ 已全部支持，2024 年底起可以在生产环境放心用。
- 性能真相：锚定到具体类（
.card:has(img)）的开销是微秒级；只有div:has(...)这种宽泛选择器 + 频繁 DOM 变更时才是问题。 - 能用 CSS 就别用 JS：表单校验态切换、空状态检测、数量查询这些场景，
:has()替代 JS 后代码量减半、不会漏同步。
性能提醒：:has() 选择器锚定越具体越好，避免 body:has()、*:has() 这种全局监听。
