:has()仅能安全替代依赖伪类激活与静态DOM关系的JS状态逻辑，如:focus/:invalid/:checked/:target；无法处理动态写入、滚动监听、节流防抖、异步加载等需JS介入的场景，且存在性能与兼容性风险。
:has() 不能替代传统状态管理 JavaScript，只能安全接管其中「存在性判断 + 静态 DOM 关系」类的子集。 它不是状态容器，不存储、不更新、不响应 JS 设置的属性，只在样式计算时做一次快照匹配。想用它管全局状态、异步数据或用户交互链路，会立刻掉进兼容性、性能和逻辑断裂的坑里。
哪些 JS 状态逻辑能被 :has() 替代
核心看两点：是否只依赖「某伪类是否激活」+「该元素与目标节点有静态可触达路径」（后代、子、相邻兄弟）。
-
:focus/:focus-within→ 用form:has(input:focus)高亮整个表单组，比监听focusin+ 手动加 class 更轻量 -
:invalid/:valid→.field:has(input:invalid:not(:placeholder-shown))可直接标红容器，避免 JS 校验后 patch class 的延迟和 SSR 不一致 -
:checked→.switch:has(input[type="checkbox"]:checked)控制开关 UI 显隐，前提是 checkbox 是其后代或相邻兄弟 -
:target→ 结合锚点跳转，section:has(.trigger:target)实现无 JS 的 tab 切换（需配合<a href="#tab1"></a>）
哪些 JS 状态逻辑绝对不能交给 :has()
一旦涉及动态写入、时间维度、像素位置或跨树通信，:has() 就失效了。
- JS 手动设置
el.checked = true或el.open = true→:has(input:checked)不触发，它只认用户原生点击/空格/回车操作 - 滚动监听：
:has(.section:in-view)会静默失败，因为:in-view不是标准伪类；用占位元素模拟也受限于 Safari 15.4–16.3 对+相邻选择器的 bug - 节流/防抖行为：:has() 没有事件回调，无法控制重绘频率，也无法做
setTimeout延迟响应 - 异步加载内容：动态
innerHTML += "<div class="error">" 后，<code>card:has(.error)要等下一轮样式计算才生效，且 Firefox 旧版可能完全不更新:has() 在真实项目中容易踩的三个性能与兼容性坑
很多团队上线后才发现卡顿或样式丢失，问题不在写法，而在误判能力边界。
立即学习“Java免费学习笔记（深入）”；
-
body:has(.theme-red)看似方便，但会强制遍历全部 DOM 节点；页面超 5000 个元素时，首次匹配可能阻塞主线程；应改用更窄范围如#app:has(.theme-red) - Safari 15.4–16.3 对
:has(.x + .y)有严重渲染错误，建议统一降级为:has(.y)（后代）或:has(> .y)（子） - Firefox 默认禁用
:has()，需用户手动开启layout.css.has-selector.enabled；生产环境必须加降级方案，比如保留 JS 设置的.is-theme-redclass
真正要警惕的是把 :has() 当成“CSS 版 React”——它解决的是「条件样式映射」，不是「状态生命周期管理」。复杂交互仍需 JS，而 :has() 最佳定位是：把原来 20 行事件监听 + class 切换的逻辑，压缩成 1 行声明式 CSS，仅此而已。
-
