2026 年 CSS :has()：静态 HTML、Safari 签字与云 Mac 质检

静态营销页与文档站仍大量手写 HTML。过去要根据子元素状态改变父级外观，往往得加一层 JavaScript 或重复的包装类名。:has() 关系伪类把方向反过来：区块可以在内部任意复选框被勾选时改变描边，表单行可以在输入无效时高亮——常常无需打包工具，甚至一行 JS 都不写。2026 年，只要目标用户群以 Safari 15.4 及以上 为主，许多团队已能把 :has() 用于视觉提示；前提是你在真实 WebKit 上验收，并控制选择器复杂度。本文整理实用写法、与 JS 及 容器查询 的取舍表，以及如何把检查纳入 Safari 质检工作流 并在租用的 Mac mini 上执行。

静态页上 :has() 解决什么问题

传统 CSS 只能沿祖先向下选后代（.theme-dark .card），无法表达「因为内部有某种子节点，所以父级要变样」。产品团队过去用 React 同步类名，或用 data-* 镜像子状态。对零 JS 的静态站——法务声明、API 小站、活动落地页——这种摩擦会挡住细腻的交互反馈。:has() 把意图写清楚：「这张卡片处于错误态，因为它含有 .error-text。」无障碍方面，可见标签与 ARIA 仍按规范提供；:has() 负责装饰层，不替代语义。

因为规则是声明式的，设计师在 CodePen 里试好的选择器可以直接进 Eleventy、Hugo 产物，无需水合。代价是心智负担：关系选择器很强，也容易套娃过深。建议在团队规范里写死「营销模板里 :has() 后不得超过两个组合符」，方便后人用 grep 维护。

与组件库混用时，注意不要把 :has() 绑到会频繁增删的 Portal 根节点；静态页虽少动态挂载，文档站里的搜索浮层仍可能改变 DOM 结构。把 :has() 根固定在卡片、字段组、表格段等稳定容器上，能减少意外全局失效。若你同时维护多语言分支，记得在每种语言的 DOM 结构下各测一遍，避免译文长度变化导致子选择器匹配范围漂移。

可直接复用的语法模式

从自包含组件入手。字段组在任意控件获得焦点可见时发光：

.field-group:has(:focus-visible) {
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.35);
}

表格行在单元格带缺失翻译标记时标红：

tr:has(td[data-missing="true"]) {
  background: rgba(255, 59, 48, 0.08);
}

可与 :not() 组合做排除态；但要牢记纯 CSS 的“空值”判断能力弱于约束校验 API。业务规则超出属性选择器表达力时，用少量脚本切换类名，比硬写十条 :has() 分支更可维护。

在深色主题下，:has() 与 color-scheme、prefers-reduced-motion 可并列使用：父级在子级含视频且用户偏好减少动效时降低阴影强度。此类模式在静态 HTML 里同样生效，只要媒体查询与 :has() 的优先级顺序在样式表中写清楚，避免后加载的主题表意外覆盖。

Safari 支持时间线与测试要点

写入兼容矩阵时可抄录以下事实：

• Safari 15.4（2022 年 3 月）在 macOS 12.3、iOS/iPadOS 15.4 上提供 :has()，与其它引擎 Chromium 105 档位的支持节奏接近。
• 企业环境若仍冻结在 Monterey 12.3 以下，分析里若仍有 3%～4% 收入来自这些构建，应为关键边框提供不依赖 :has() 的配色。
• 部分 WebKit 修复会先出现在 Safari Technology Preview；若社区讨论涉及 :has() 内 nth-child 等行为，应在稳定版与 STP 间对比后，再写入每次静态发布的回归说明。

在 README 里把最低 Safari 版本与 Node、包管理器版本并列，避免外包在冲刺周「为求稳」整段删掉 :has()。每半年根据企业机队换代情况复查这一行。

若站点通过 CDN 做灰度，可在灰度层对旧版 Safari 用户注入简化 CSS，而不是维护两套完整 HTML。:has() 作为增强层时，先保证无 :has() 时仍可读完正文与提交表单，再逐步打开装饰效果。

决策表：:has()、JS 还是 @container

需求	优先	原因
子无效时高亮父级	:has(:invalid)	零 JS，离线静态 HTML 可用。
侧栏宽度变化时改栅格轨	@container	宽度驱动布局属于容器查询，不是 :has()。
提交 JSON 并展示服务端错误	JavaScript	网络与 ARIA 实时更新超出 CSS 范围。
任意复选框勾选时显示图标	:has(:checked)	声明式；配合正确 label 仍可访问。
滚动深度节流打点	JavaScript	CSS 无法安全发送信标。

当 :has() 与 @container 同时相关时，建议分工：容器管宏观布局，:has() 管组件内微观状态。很少需要在同一元素上叠满两种机制。

与 容器查询 联用时，先画清「谁响应父盒尺寸、谁响应子状态」的示意图，再落笔到 CSS，可减少 code review 时的来回。

性能与选择器卫生

后代变化时，浏览器必须重新评估关系选择器。在单页长达 4000+ 节点时，常见的 body:has(.modal[open]) { overflow: hidden; } 通常仍可接受；但若把多条 :has() 绑在高频动画上，就会吃力。WebKit 对局部子树的样式失效较为高效；请把 :has() 根保持在卡片与表单段附近。若性能录制里紫色「样式重算」条在中端笔记本的 hover 风暴中持续宽于 2～3ms，应重构为在包装器上由单一委托监听切换一个类。

用 Stylelint 等限制选择器特异度，可防止「选择器汤」。在云端 Mac 跑 CI，能在合并前暴露仅 macOS 才出现的回归；租用 Apple Silicon 比为短期活动再买一台笔记本更省 CapEx。

安全上 :has() 不能按任意文本内容匹配，只有结构与伪类，本身不是数据外泄通道；但仍应避免把含用户生成类名的完整选择器串打进第三方分析。

迁移旧版 BEM 修饰符如 .card--error 时，可安排两个迭代并行：保留类名给统计钩子，由 :has() 驱动视觉，待事件跟踪迁到 data 属性后再删修饰符。静态站常在删掉冗余切换脚本后 gzip 再省 2～4KB。

打印样式中若使用 :has()，请在「打印预览」里单独测 Safari：部分用户只用打印 PDF 归档合同页，忽略这一路径可能留下白底上看不见的错误描边。

云 Mac mini 上的验收清单

租用带 Safari 稳定版的 macOS，用 file:// 或本地静态服务器加载构建产物，跑三条路径：纯键盘表单、强制无效态、200% 缩放查看裁切。缺陷扫荡时用 1280×720 录屏即可。团队没有实体 Mac 时，SSH 加偶发 VNC 与本站其它 Safari 文章所述一致。

Apple Silicon Mac mini 在并行 lint 与样式分析时仍保持安静，适合夜间批量跑二十套 HTML 模板。云访问让跨境协作共享一台验收机，而不必邮寄笔记本。

加一条自动化冒烟：加载页面，把示例输入在合法/非法间切换，对 :has() 根节点截一张计算样式面板图。PNG 与发版标签放一起几乎不占空间，却能在 WebKit 与 Chromium 表现不一致时省下大约 25～35 分钟 的争论时间。

若与 STP 对比工作流 结合，建议在变更日志里标注「本次是否在 STP 复测」，避免把预览版独有行为当成稳定版承诺给客户。

常见问题

Safari 从哪一版支持 :has()？

Safari 15.4（2022 年 3 月，macOS 12.3 与 iOS 15.4）起支持。仍需 Safari 14 的团队要提供不依赖 :has() 的兜底。

:has() 能完全替代表单里的 JavaScript 吗？

纯视觉提示常常可以；校验提示、ARIA live、与服务器的往返仍需要 JS 或更完整的 HTML 语义。

:has() 会影响性能吗？

超大页面上的深度嵌套链可能增加样式重算。保持局部、避免绑到数千节点页面的每次 hover，并在 Web Inspector 里实测。

有节制地使用 :has()，能在保持静态 HTML 精简的同时去掉样板代码。务必搭配真实 Safari 会话——而不仅是 Chromium——以捕捉 WebKit 特有的失效行为。Mac mini 在 Apple Silicon 上提供原生 WebKit、低待机功耗与安静运行，适合长时间手工质检。MacHTML 提供可 SSH/VNC 的实体 Mac mini 租用，便于在发布窗口内搭建 WebKit 实验环境，活动结束再缩容，避免硬件闲置。