旧版浏览器完全忽略 :has() 规则，因其解析器未实现该语法，整条规则（含声明块）被静默丢弃；Chrome 105、Firefox 121、Safari 15.4 之前均如此。
:has() 在旧版浏览器里根本不会被识别，不是“解析失败”，而是直接跳过整条规则——它就像写了个浏览器不认识的单词，CSS 引擎连报错都懒得报。
为什么旧版浏览器完全忽略 :has() 规则
Chrome 105 之前、Firefox 121 之前、Safari 15.4 之前，这些浏览器的 CSS 解析器压根没实现 :has() 的语法解析逻辑。遇到 div:has(p) 这种写法，引擎会把它当作非法选择器，整条 CSS 规则（包括大括号里的所有声明）直接丢弃，不匹配、不渲染、也不触发任何降级行为。
这不是兼容性“差”，是“不存在”——就像你给 IE8 写 grid-template-columns，它不会尝试理解，只会静默跳过。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
-
form:has(input:invalid)在 Safari 15.3 或 Firefox 120 中完全不生效，DevTools 里也看不到该规则被应用 - W3C 验证器报
CSS: Parse Error: :has(.class)，但这只是工具限制，不影响现代浏览器运行（需加空格修复） - 你以为加了
@supports selector(:has(*))就能安全包裹，但旧版浏览器连@supports selector()本身都不支持，整个块仍会被跳过
后代选择器回退：不是“替代”，而是“并存”
用后代选择器（如 .form-group .error）不能“模拟”:has() 的行为，但可以和它共存，形成视觉上一致的降级体验。关键不是让旧版浏览器“执行同样逻辑”，而是让最终样式结果接近。
实操建议：
- 把
:has()规则写在后代选择器规则之后，利用层叠覆盖（例如先写.form-group { border: 1px solid #ccc; }，再写.form-group:has(input:invalid) { border-color: #e53e3e; }） - 为需要回退的场景，手动加一个 JS fallback class：
form-group--has-invalid，然后写.form-group.form-group--has-invalid { border-color: #e53e3e; } - 避免在
:has()规则里写唯一依赖它的布局属性（比如display: grid），否则旧版浏览器会彻底丢失结构——应把基础布局放在无条件规则里
哪些后代选择器组合最适合作为 :has() 的视觉回退
不是所有 :has() 场景都有合理回退，优先选结构稳定、人工可控的场景：
-
.card:has(img)→ 回退用.card.card--with-img，CMS 或模板层统一加类（比 JS 检测更轻量） -
h2:has(+ p)→ 回退用相邻兄弟选择器本身：h2 + p { margin-top: 0; }，再反向控制h2的margin-bottom（注意方向） -
.grid:has(.item:nth-child(7))→ 不适合纯 CSS 回退，必须用媒体查询或 JS 统计子元素数量后加类 -
nav:has(.submenu:hover)→ 旧版浏览器无法响应 hover 状态联动，回退只能靠nav.is-open手动控制，或放弃该交互
真正容易被忽略的复杂点
:has() 的最大陷阱不在语法，而在 DOM 变动时机：图片懒加载完成、innerHTML 动态插入、Web Component 升级……这些都会触发浏览器重新评估所有 :has() 规则。旧版浏览器虽不支持，但你在写回退方案时，如果依赖 JS 监听这些变动来补 class，就很容易漏掉异步节点或 Shadow DOM 内部更新。别只测初始渲染，要测内容动态出现后的样式一致性。
