:has()伪类在旧版浏览器中会解析报错或跳过整条规则，现代浏览器已原生支持，但需注意其在懒加载和动态插入节点时可能引发重排重绘。
因为旧版浏览器压根不认识 :has() 这个语法——它不是“不生效”，而是解析阶段直接报错或跳过整条规则，连样式计算都不会触发。
Chrome
这些版本的 CSS 引擎在词法分析时遇到 :has()，会将其判为非法 token，整条规则（包括大括号里的声明）被静默丢弃。DevTools 里看不到匹配痕迹，控制台也不报错，容易误以为是 CSS 写错了。
- Firefox 120 及更早：调用
document.querySelector('div:has(.child)')直接抛DOMException: "is not a valid selector" - Safari 15.3：
:has(.child)解析失败，整条 CSS 规则失效；@supports selector(:has(*))可能返回true但实际不执行，属于假阳性 - Chrome 90–104：部分版本虽支持
@supports检测，但样式仍不渲染，不能靠检测结果做降级逻辑
@supports selector(:has(...)) 不可靠，别当真
这个检测在旧 Chromium 中常返回 true 却不执行样式，在 Safari ≤16.3 中也可能返回 true 但忽略 +/~ 关系选择器。它只反映“语法是否被识别”，不等于“功能可用”。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 真正验证方式只有两个：
CSS.supports('selector(:has(div))')返回true且 页面中对应样式实际生效 - 构建工具（如 cssnano）可能直接删掉整条
: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 和低端设备上表现明显。别只测静态页面，得在真实交互流里看布局是否抖动。
