:has()不是真正父选择器，仅能匹配写在冒号前的祖先元素，如section:has(h1)选中section而非其上层article；不支持直接父级定位、伪元素、动态伪类及嵌套，需兼顾结构明确性、性能与兼容性兜底。
:has() 不是终极解决方案，它只是目前唯一能在纯 CSS 层实现“子变 → 父响应”的可用工具，但必须配合明确的结构、可控的性能开销和兼容性兜底策略才能落地。
为什么写 :has() 却选不到父元素？
最常见原因是：你写的不是“父”，而是“祖先”——:has() 匹配的是你写在冒号前面的那个元素，比如 section:has(h1) 选中的是 section，不是它的上一级 article 或 body。它不支持向上跳一级的“直接父级”定位。
- 如果你真想影响
div的直接父section，得把规则写成section:has(div .error)，而不是div:has(.error) -
:has()内部不能用伪元素（如::before）、动态伪类（如:focus在 Safari 15.4–16.3 中静默失败）、嵌套:has()（所有浏览器拒绝解析） - 空格敏感：
:has(.error)在部分验证器里报错，但浏览器能执行；稳妥写法是:has( .error)（括号后加空格）
:has() 在表单验证中怎么写才不翻车？
这是当前最稳定、最值得优先用的场景，但容易因状态判断逻辑出错导致样式失效。
-
form:has(input:invalid)✅ 可行，前提是input是form后代（哪怕嵌套多层） -
form:has(:invalid)❌ 错误，:invalid必须绑定到具体元素，不能单独出现 -
label:has(input:not(:placeholder-shown):valid)✅ 比[value!=""]可靠，因为value是初始属性，不随输入更新 - 避免
:has(> input)这种写法去匹配深层嵌套的input，它只认直接子元素；该用空格或显式层级
哪些浏览器真的支持，又有哪些隐藏限制？
支持不是“全有或全无”，而是分层生效：语法能解析 ≠ 所有子选择器都可用 ≠ 性能可接受。
- 基础支持：Chrome 105+、Edge 105+、Safari 15.4+、Firefox 121+（默认启用）
- 但 Safari 15.4–16.3 对
:has(+ .sibling)、:has(:focus-within)支持不稳定，建议避开 - 用
CSS.supports('selector(:has(*))')做运行时检测，比 UA 判断更可靠 -
:has(*:hover)或:has(div > ul > li > a:hover)会触发重排开销，Chrome 可能降级处理甚至跳过计算
真正难处理的不是语法对不对，而是当 DOM 结构松散、子状态依赖复杂交互、或需要在大量列表项中高频响应时，:has() 的性能代价和浏览器实现差异会立刻暴露出来。它值得用，但不该滥用——表单校验、折叠面板、卡片状态这类边界清晰、变更频率低、样式轻量的场景，才是它该在的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
