:has() 选中的是选择器主体元素而非真正父级，仅通过存在性条件筛选；它不支持逆向遍历、伪元素、嵌套或部分结构伪类，且性能受作用域大小影响。
:has() 不是真正意义上的“选择父级元素”，它选中的始终是你写在冒号前面的那个元素——只是加了个存在性条件。比如 label:has(input:checked) 选中的是 label，不是它的父级 div 或 form。想让它生效，你得把目标容器本身作为选择器主体。
为什么 :has() 不能跨层级向上选“真正的父”
CSS 选择器模型从不支持逆向 DOM 遍历。:has() 的“父”是语义上的容器，不是结构上的直接父节点。它只检查“当前元素内部是否能找到匹配项”，不跳到上一级去匹配。
-
div:has(.error)→ 匹配这个div，前提是它内部（任意深度）有.error -
div:has(> .error)→ 只匹配直接子元素是.error的div，层级更严 -
section:has(div .error)→ 才可能影响div的父级section，但你要主动把section写进选择器 - 写
div:has(.error) section是错的——这会找div后面的section，和“父级”无关
:has() 支持哪些关系符？哪些绝对不行
括号内必须是合法的相对选择器，浏览器按规则硬性过滤：
- ✅ 支持：
>（直接子）、+（紧邻兄弟）、~（后续兄弟） - ❌ 禁用：
::before、::after等伪元素 ——:has(::before)直接无效 - ❌ 动态伪类不稳定：
:focus、:hover在 Safari 中常静默失败，Chrome/Firefox 行为也不一致，慎用 - ❌ 不支持嵌套：
:has(:has(.a))被所有引擎拒绝 - ❌
:nth-child()、:first-of-type等结构伪类目前多数浏览器不识别，写了也白写
表单验证中最可靠的状态组合写法
校验场景最易踩坑：用户刚打开页面，placeholder 还在，:invalid 就已触发，导致一上来就红边框。必须配合状态过滤：
- 用
:not(:placeholder-shown)排除 placeholder 未消失的空输入 - 避免用
[value]或[value!=""]—— DOM 属性不会随输入实时更新 - 聚焦高亮优先用
:focus-within（兼容性更好），:has(input:focus)仅作降级或特定需求 - 示例：
.field:has(input:invalid:not(:placeholder-shown))比.field:has(input:invalid)更可控
性能和结构耦合是最容易被忽略的点
写 body:has(.error) 看似方便，但浏览器要遍历整个 DOM 树判断是否存在 .error，开销大；结构稍一变（比如 input 被包进 shadow DOM 或 slot 外层），规则立刻失效。
- 尽量缩小作用域：
.form:has(input:invalid)比body:has(input:invalid)快得多 - 确保 HTML 是真实包裹关系 ——
for/id关联的label和input不算，:has()只认 DOM 树路径 -
:has()不触发重排，但匹配计算本身会拖慢样式计算阶段，尤其在长列表或复杂布局中
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
