chrome 105+才支持:has()，因其是css selectors level 4特性，需渲染引擎实现反向dom遍历，早期因性能开销被搁置；chrome 105（2022年9月）起全功能启用，同步支持嵌套与兄弟选择器。
为什么 :has() 在 Chrome 105+ 才能用
:has() 是 CSS 4 级选择器，依赖浏览器对“父选择器”的底层支持。它不是简单的语法糖，而是需要引擎在渲染前反向遍历 DOM 树——这会带来性能开销，所以早期被主流引擎搁置。直到 Chrome 105（2022 年 9 月）、Safari 15.4（2022 年 3 月）、Firefox 121（2023 年 12 月）才陆续启用。Edge 同步 Chrome 版本，但旧版 Edge（基于 EdgeHTML）完全不支持。
这意味着：如果你的项目需兼容 IE、旧版 Safari（:has() 不能作为唯一方案；生产环境建议加 JS 回退或 feature detect。
:has() 的基本写法和常见误用
语法是 :has(选择器)，括号里写子元素（或后代）的条件，整个选择器匹配的是“满足该条件的父/祖先元素”。关键点在于：它只匹配元素本身，不改变子元素样式。
- ✅ 正确：
button:has(.loading)→ 匹配带有.loading子元素的button - ❌ 错误：
button:has(.loading) .loading→ 这想改子元素，但:has()本身不参与后续链式选择，这里实际是先找 button，再找其内部 .loading，和 :has 无关 - ⚠️ 注意：
div:has(> p)中的>是有效语法，表示直接子元素；但div:has(p:first-child)也合法，而div:has(p::before)不行——伪元素不能出现在:has()内
替代 input:checked 控制父容器样式的典型场景
最常用案例是自定义复选框/单选按钮：原生 <input type="checkbox"> 无法直接被样式化，但可通过 :has() 让其父容器响应状态变化。
label:has(input[type="checkbox"]:checked) .checkmark {
background-color: #007bff;
}
label:has(input[type="checkbox"]:checked) .checkmark::after {
opacity: 1;
}
这里 label 是 input 的父级（且 input 在 label 内部），所以能生效。但如果结构是 <input id="a"><label for="a"></label>（分离式），:has() 就无效——它只认 DOM 树中的祖先-后代关系，不认 for/id 关联。
- 必须确保目标元素是真正父/祖先节点（即 HTML 中包裹关系）
- 不能跨 shadow DOM 边界（
:has()对 slot 内容有效，但对 shadowRoot 内部元素无效） -
:has(:focus-within)可用于表单容器高亮，但注意:focus-within本身有兼容性，叠加后支持范围更窄
性能和可维护性隐患
:has() 的计算成本高于普通选择器，尤其当匹配范围广（如 body:has(.error)）或嵌套深时，可能触发重排。Chrome DevTools 的 “Rendering” 面板中开启 “Paint flashing”，能直观看到哪些区域因 :has() 频繁重绘。
- 避免在顶层元素（
html、body）上使用:has()，缩小作用域到具体组件容器 - 不要用
:has()替代简单 JS 状态管理：比如切换主题时，document.documentElement.classList.toggle("dark")+ 普通类名比html:has([data-theme="dark"])更可控、易调试 - VS Code 或 WebStorm 默认不校验
:has()语法，容易写错括号或漏空格（:has(.a.b)合法，:has(.a.b )中多余空格会导致无效）
真正难的不是写对语法，而是判断“这个交互是否值得引入 :has()”——多数时候，一个 class 切换比一行 :has() 更稳定、更易测试、更利于 SSR 渲染一致性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
