:has() 伪类需谨慎使用——chrome 105+、safari 16.4+、firefox 121+ 才真正支持，旧版本静默失效；css.supports 检测存在假阳性，须结合实际渲染验证；空格可绕过 w3c 验证器误报；动态场景易引发性能抖动。
因为写了 :has() 不等于能用——它在不同浏览器里要么完全失效，要么只认一半，还可能触发性能抖动。你得先知道谁真支持、谁假装支持、谁连报错都不报。
Chrome 105+、Safari 16.4+、Firefox 121+ 才算真正可用
低于这些版本的浏览器会静默丢弃整条规则，DevTools 里看不到匹配，控制台也不报错，容易误判成 CSS 写错了。
-
Chrome 105+（2022 年 9 月起）：全功能支持，包括嵌套:has(:has())和兄弟选择器:has(+ .sibling) -
Safari 15.4–16.3：基础支持但对+/~有偶发忽略，建议升到16.4+再用复杂关系 Firefox ：不识别 <code>:has()，document.querySelector('div:has(.child)')直接抛DOMException: "is not a valid selector"
CSS.supports('selector(:has(div))') 返回 true ≠ 真可用
这个检测在旧版 Chromium 中可能返回 true 却不执行样式，属于“假阳性”。不能靠它做降级开关。
- 验证是否真支持？必须同时满足两个条件：
CSS.supports('selector(:has(div))')返回true，且实际 DOM 渲染生效 - 推荐在关键场景加运行时校验，比如
if (CSS.supports && CSS.supports('selector(:has(:focus))')) { /* 启用 :has() 样式 */ } - 不要用
@supports selector(:has(*))包裹整段 CSS——旧浏览器跳过整个块，新浏览器又可能因解析差异漏掉部分规则
W3C 验证器报错只是工具局限，不是代码错误
nu validator 当前仍按旧语法解析，把 body:has(.modal) 当作错误，提示 CSS: Parse Error: )。这不是 bug，是词法分析器没跟上规范更新。
- ✅ 立即修复：在左括号后加空格，写成
body:has( .modal)或显式用组合器body:has(>.modal) - ⚠️ 注意：
:has( .modal)和:has(.modal)对浏览器完全等价，空格仅用于骗过验证器 - ❌ 别因此删掉
:has()或回退到 JS——现代浏览器原生能力已足够稳，该伪类是解决“CSS 无法向上选择”的标准方案
最易被忽略的点是：:has() 在图片懒加载、动态插入节点等场景下可能触发重排重绘，尤其在 Safari 和低端设备上表现明显。别只测静态页面，得在真实交互流里看布局是否抖动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
