现代CSS支持父选择器吗？说说:has的兼容现状

结论：支持，而且早就该用了。 `:has()` 是 CSS Selectors Level 4 里的关系型伪类，也就是大家俗称的「父选择器」，Safari、Chrome、Edge、Firefox 四大内核现在全部默认支持，全球覆盖率已超过 93%，Baseline 状态是「广泛可用」。生产环境可以放心用，唯一需要做的是给老版本浏览器留一条降级路径。

:has() 到底是什么：CSS 的第一个「父选择器」

结论：`:has()` 让选择器第一次能「往回看」，根据子元素的状态去选中祖先或前一个兄弟元素，这是纯 CSS 做不到的事之前必须靠 JS 才能实现的。

传统 CSS 只能从父往子、从前往后选，父元素无法感知子元素的状态。`:has()` 把这个方向反转了：`div:has(> img)` 表示「含有直接子元素 img 的 div」，`.card:has(a:hover)` 表示「鼠标悬停在内部链接上的卡片」。

它本质是「相对选择器参数」，`:has(参数)` 里的参数必须以组合器开头或以 `:scope` 参照。所以 `article:has(h2)` 和 `article:has(> h2)` 语义不同——前者匹配任意后代，后者只匹配直接子级。

兼容现状：时间线和具体版本号

结论：2023 年 12 月 Firefox 121 正式发布后，`:has()` 完成了主流浏览器全覆盖，2024 年起可以视为「默认可用的标准特性」。

关键节点如下：

• Safari 15.4（2022 年 3 月）——全球第一个默认开启，比 Chrome 早了半年
• Chrome 105 / Edge 105（2022 年 8 月）——Chromium 系跟进，Opera 91 同批
• Firefox 121（2023 年 12 月）——此前一直藏在 `layout.css.has-selector.enabled` 开关后面，121 才默认开启
• 三星浏览器 20 及以上同步支持

不支持的只有历史遗留：IE 全系（永久不支持）、Chrome 104 及以下、Firefox 120 及以下、iOS 15.3 及以下。

真正需要警惕的是嵌入型 WebView：部分 App 内置浏览器、老旧安卓 WebView、以及大部分邮件客户端，内核版本可能明显落后于系统浏览器。如果你的页面要在微信旧版本、邮件模板里渲染，`:has()` 不一定生效。

怎么写才安全：特性检测与降级

结论：用 `@supports selector(:has(*))` 做特性检测，不要把 `:has()` 和其他选择器写在同一个逗号列表里，否则在不支持的环境下整条规则都会被丢弃。

这是最容易踩的坑。CSS 的容错规则是：逗号分隔的选择器列表中只要有一个无效，整条规则作废。所以下面这种写法在老浏览器上会导致 `.card` 的基本样式也一起失效：

/* 危险：不支持 :has() 时，.card 的样式也丢了 */
.card, .card:has(img) { padding: 16px; }

正确做法是拆开，并用 `@supports` 包裹增强样式：

.card { padding: 16px; }

@supports selector(:has(*)) {
  .card:has(> img) { padding: 0; }
  form:has(input:invalid) .submit-hint { display: block; }
}

JS 侧可以用 `CSS.supports('selector(:has(*))')` 判断，返回值直接决定是否给 `document.documentElement` 加一个 `has-support` class，走 class 降级分支。

如果必须兼容老环境，最稳的降级仍是 JS：用 `MutationObserver` 监听子元素变化，手动给父元素加 `.has-child` 之类的 class，CSS 侧只写 `.card.has-child`。功能等价，代价是多一段脚本。

性能与语法上的四个硬性限制

结论：平时写没问题，但别在大列表上用 `:has()` 配合 `~`、`+` 做跨层级回溯，也要知道它有几条语法禁区。

1. 不能嵌套：`:has()` 内部不能再出现 `:has()`，`div:has(p:has(span))` 是无效选择器。
2. 不能放伪元素：`:has(::before)` 无效，伪元素不是 DOM 节点。
3. 特异性较高：`:has()` 的特异性等于其参数列表中最高的那个，和 `:is()` 规则一致。`:has(.a, #b)` 按 `#b` 算。
4. 性能：浏览器已经针对 `:has()` 做了失效追踪优化，普通用法开销可忽略。但如果是「大容器 + 后代任意变化都要重算」的写法，比如在几百个行的大表格上写 `tr:has(td.error)`，样式重算成本会明显上升。建议把它限制在有限容器里，或者改用行级 class。

另外提醒一句：jQuery 里也有个 `:has()`，语义是「包含某后代的元素」，跟 CSS 这个「父选择器」不是一回事，别混着理解。

收尾

`:has()` 现在的定位很清楚：**新项目直接上，不用犹豫；老项目按浏览器支持面决定，用 `@supports selector(:has(*))` 包一层增强样式即可。** 真正要记住的三件事——别把它塞进逗号选择器列表、别嵌套、别在大列表上做跨层级回溯。把这几条守住，它能替掉的 JS 代码量比你想象的多。