:has()不是父选择器但能实现“子变→父响应”，如form:has(input:invalid)选中form本身；它匹配冒号前元素，不选直接父级；不支持>、伪元素、嵌套:has()及部分动态伪类；表单验证是其最稳定适用场景。
:has() 不是真正的父级选择器，但它在绝大多数实际场景中能达成“子变 → 父响应”的效果——你写 form:has(input:invalid)，目标就是那个 form 本身，只是加了个条件：它内部得有无效的 input。过去这必须靠 JS 注入类名，现在纯 CSS 就能声明式实现。
为什么写 :has() 却选不到“直接父级”？
因为 :has() 匹配的是你写在冒号前面的那个元素，不是它的上一级。比如 div:has(.error) 选中的是 div，不是它的 section 父容器。所谓“父选择器”，其实是你主动把语义容器（如 label、form、article）作为选择目标，再用 :has() 加条件筛选。
- 想影响
div的直接父section？得写section:has(div .error)，而不是div:has(.error) -
:has()内部不支持>表达“仅限直接子”，它只认后代关系；form:has(> input)会漏掉嵌套在fieldset或div里的input - 结构松散时（比如
input被多层 wrapper 包裹），:has()依然有效，但依赖你提前明确容器层级
:has() 在表单验证中怎么写才不翻车？
这是当前最稳定、最值得优先落地的场景，但常见错误会让样式完全失效。
-
form:has(input:invalid)✅ 可行，前提是input是form后代（哪怕嵌套多层） -
form:has(:invalid)❌ 错误，:invalid是伪类，不能脱离元素单独存在 -
label:has(input:not(:placeholder-shown):valid)✅ 比[value!=""]可靠，因为value是初始属性，不随输入更新 - 避免
:has(*:hover)或:has(input:focus)—— Safari 15.4–16.3 对动态伪类支持极不稳定，Chrome 可能静默跳过计算
哪些写法浏览器根本不会解析？
:has() 对括号内选择器有硬性限制，不是语法合法就能运行。
-
:has(::before)—— 伪元素不允许出现在:has()内部 -
:has(input:focus)—— 动态交互伪类在多数浏览器中仍被禁用或降级处理 -
:has(:has())—— 所有主流引擎拒绝解析嵌套:has() -
:has(> :nth-child(2))—— 结构伪类目前未被广泛支持，即使语法通过也常静默失败 - 空格敏感：
:has(.error)在部分验证器里报错，稳妥写法是:has( .error)（括号后加空格）
真正难处理的不是语法对不对，而是当 DOM 结构松散、子状态依赖复杂交互、或需要在大量列表项中高频响应时，:has() 的性能代价和浏览器实现差异会立刻暴露出来。它值得用，但不该滥用——表单校验、折叠面板、卡片状态这类边界清晰、变更频率低、样式轻量的场景，才是它该在的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
