浏览器解析css不支持向上查找父元素，:has()并非父选择器而是父感知条件，旧版浏览器兼容性差，动态场景下js仍是唯一可靠方案。
浏览器解析CSS时根本不“往上找”
CSS选择器的匹配过程是单向的：浏览器从左到右、从外到内扫描DOM树，只检查“当前元素是否匹配该规则”，而不会回溯父节点。写.child时，它只关心哪个元素有class="child"，完全不关心它上面是谁。所谓“选父”，本质是要让浏览器对每个.child都去调用.parentElement再比对——这在渲染引擎设计里属于反模式，会破坏层叠（cascade）逻辑和性能模型。
:has()不是父选择器，而是“父感知条件”
:has()看起来像能选父，但它的作用机制完全不同：
- 它仍是从父元素开始匹配，只是加了一个“内部是否存在某子元素”的判断条件
- 语法必须是
.parent:has(.child)，不能写成.child:has(../.parent)或:has(.child) .parent - 如果
.child被display: none或未挂载，:has()直接返回false，不触发样式 - 旧版Safari（≤15.3）、IE、多数微信内置WebView完全不识别
:has()，会被整条规则忽略
真正需要动态响应时，JS仍是唯一可靠路径
当你遇到这些场景：.child内容是AJAX加载的、文本内容需实时匹配、状态依赖表单校验结果、或要兼容IE/老安卓WebView——:has()就失效了。此时必须用JS：
- 用
element.closest('.parent')比element.parentElement更安全，能跨多层向上查找指定类名 - 监听事件比轮询高效，例如
input.addEventListener('invalid', () => { form.closest('.form-group').classList.add('has-error'); }) - 避免直接操作
style属性，优先增删class，保持CSS与行为分离
最常被忽略的一点：很多所谓“必须选父”的需求，其实只要让父元素“知道子元素变了”就够了。:has()能解决其中一部分，但它的边界很硬——不处理文本内容、不响应伪元素、不兼容SSR首屏、也不支持复杂计算。真要稳，还是得靠JS把状态显式地“提上来”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
