:has()不是真正的父级选择器，但能通过匹配容器元素实现“子变→父响应”效果，如form:has(input:invalid)；它不支持反转dom树向上定位，且对括号内选择器有严格限制，如禁用伪元素、动态伪类及嵌套:has()。
:has() 不是真正的父级选择器，但它在绝大多数实际场景中能达成“子变 → 父响应”的效果——开发者写 form:has(input:invalid)，目标确实是那个 form 本身，只是加了个条件：它内部得有无效的 input。这种写法直击过去必须用 JS 注入 form--error 类的痛点，所以被通俗叫作“父选择器”。关键在于，它不改 DOM、不写 JS、不触发重排，纯靠样式层声明式匹配。
为什么 :has() 不能选“直接父级”？
CSS 选择器模型从不支持“反转 DOM 树向上定位”，:has() 也没突破这个限制。它匹配的是你写在冒号前面的那个元素（比如 div），不是它的上一级 section 或 body。所谓“选父”，其实是你主动把选择器目标设成了语义上的容器——label:has(input) 里，label 就是包裹 input 的那个“父”；article:has(.featured) 里，article 就是内容容器。如果你真想影响 div 的父级，得把规则写成 section:has(div .error)，而不是指望 div:has(.error) 自动跳上去。
:has() 在表单验证中怎么写才可靠？
常见需求是“任意 input 无效时，整个 form 加红边框”，但容易翻车：
-
form:has(input:invalid)✅ 可行，前提是input确实是form的后代（哪怕嵌套多层）；靠for属性关联的label不算 -
form:has(:invalid)❌ 错误，:invalid是伪类，不能单独用在:has()里，必须绑定到具体元素（如input:invalid） -
form:has(input[value!=""])⚠️ 失效，value是 DOM 属性，不会随用户输入实时更新；应改用input:not(:placeholder-shown):valid这类状态伪类 - 结构陷阱：如果
input实际在form > fieldset > div > input，写form:has(> input)就会漏掉——>只匹配直接子元素，得用空格或明确写出层级
哪些写法会直接失效？
:has() 对括号内选择器有硬性限制，以下情况浏览器根本不会匹配：
-
:has(::before)—— 伪元素不允许出现在:has()内部 -
:has(input:focus)—— 动态交互伪类（:focus、:hover）在多数浏览器中仍不被支持，Safari 尤其不稳定 -
:has(:has(...))—— 嵌套:has()被所有主流引擎拒绝 -
:has(*:hover)—— 过于宽泛的选择器会触发性能警告，Chrome 可能降级或跳过计算 -
:has(> :nth-child(2))—— 结构伪类（:nth-child、:first-of-type）目前未被广泛支持，即使语法合法也常静默失败
真正难处理的不是语法错误，而是结构耦合和性能隐忧：写 section:has(div ul li a.active) 这种深层链，在长列表滚动时可能带来 4–6ms 的样式重计算延迟；而依赖 :has(> .trigger) 却忽略中间层级，结果就是样式完全不生效——这些坑不会报错，只会让你反复检查 CSS 却找不到原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
