:has() 不能选取父元素，仅能基于后代或兄弟是否匹配条件来筛选自身；它不反转匹配目标，仅实现条件渲染，如 form:has(.error) 为 form 自身设样式，而非其父级。
:has() 不能选取父元素——它只能让一个元素“基于其后代/兄弟是否匹配某条件”来决定自身是否被选中，但它本身不会把选择器的匹配目标“反转”到祖先上。这是根本限制，不是写法问题。
为什么 :has() 看起来像能“选父”，其实是误解
常见错觉：写 div:has(> .error)，以为是在“选包含 .error 的 div 的父级”。其实它选的就是那个 div 自身，只是加了条件。CSS 没有“向上选择父级”的能力，:has() 也没突破这个模型。
它解决的是“条件渲染”问题，不是“逆向定位”问题。例如：
form:has(.error) { border-color: red; }
这表示：当 form 内部任意位置存在 .error 元素时，该 form 自身应用红边框。目标仍是 form，不是它的父 section 或 body。
立即学习“前端免费学习笔记（深入）”；
:has() 支持哪些关系和语法？哪些会直接失效
支持 >（子元素）、+（相邻兄弟）、~（一般兄弟）、空格（后代），也支持组合与否定（如 :not(:has(...))）。但以下情况会完全不生效：
-
:has(> :nth-child(2))—— 多数浏览器（包括 Chrome 125+）仍不支持在:has()内使用结构伪类 -
:has(+ button:disabled)—— 部分旧版 Safari 对兄弟选择器嵌套支持不完整 -
:has(input:focus)—— 动态伪类在部分场景下触发延迟或不更新（尤其表单快速切换焦点时）
实操建议：优先用 > 或空格，避免嵌套伪类；用 input:valid 替代 :has(input:not(:invalid)) 这类绕弯写法。
真想影响“父的父”？只能靠 HTML 结构配合或 JS 回退
如果业务需要“当某个 input 出错时，高亮它外层的 card 容器，再连带影响 page-header”，纯 CSS 没有通用解。可行路径只有两个：
- 提前在 HTML 中用 class 标记层级关系，比如给
form加data-validation-scope="card"，再用 JS 监听并切换.card.error - 把“需响应的容器”设为
:has()的直接目标，例如：.card:has(.error)—— 要求.error必须在.card内，而不是更深的嵌套里漏出来
注意：Safari 15.4+ 才开始支持 :has()，且早期版本不支持 :has(+ ...)；Firefox 121+ 支持，但默认关闭，需手动开启 layout.css.has-selector.enabled（生产环境不可依赖）。
性能和可维护性容易被忽略的点
:has() 是 CSS 中少有的“需要遍历子树”的选择器，浏览器必须对每个候选元素执行内部匹配检查。这意味着：
- 在长列表（如 1000+ 行表格）里写
tr:has(td:nth-child(3):empty)，滚动时可能明显卡顿 - 不要在
*:has(...)或body:has(...)这种宽泛选择器上用，匹配成本指数级上升 - 和
:is()/:where()组合时，:has()的条件始终以当前选择器主体为锚点，别指望它“穿透”作用域
真正难的从来不是怎么写对 :has()，而是判断“这里到底该用 CSS 条件渲染，还是该由 JS 显式管理状态”。后者往往更可控、更易调试。
