Safari 15.4 首次原生支持 :has()，15.3 及更早版本完全不识别该伪类，解析器直接跳过整条规则；替代方案应以 JS 主动校验+data属性驱动CSS为主，:has()仅作零JS增强层。
为什么 Safari 15 以下完全不支持 :has()
Safari 15.4 是首个原生支持 :has() 的稳定版本，15.3 及更早版本压根不识别该伪类——不是“部分失效”，而是浏览器解析器直接跳过整条规则，连警告都不报。这意味着写 .field:has(input:invalid) 在 iOS 15.2 上等于没写，样式不会应用，也不会触发任何错误提示。
:has() 失效时最实用的 JS 替代方案
纯 CSS 路径已断，必须用 JS 补位，但目标不是“模拟 :has()”，而是解决具体问题（比如表单错误高亮）。推荐轻量、可复用的监听模式：
- 监听
input的invalid和input事件，用checkValidity()主动校验，避免依赖浏览器默认失焦时机 - 用
closest(".field")向上找父容器，比手动遍历parentElement更鲁棒（能跨多层） - 不要每次事件都重排 class：用
toggleAttribute("data-has-error", !valid)控制自定义属性，CSS 侧写.field[data-has-error] - 对动态插入的表单项（如 React/Alpine），用
MutationObserver监听新增input并初始化监听器
构建工具和 CSS-in-JS 的隐藏陷阱
即使你写了正确的 JS 逻辑，仍可能被构建流程“静默破坏”：
- PostCSS 插件（如
postcss-preset-env）默认会删掉不认识的伪类，需显式配置stage: 4或features: { "nesting-rules": true, ":has": true } - CSS-in-JS 库（如 Emotion、Styled Components）可能在 SSR 阶段剥离
:has()规则，导致首屏无样式；建议把:has()相关规则抽离到外部.css文件并禁用 purge - Webpack 的
mini-css-extract-plugin+css-minimizer-webpack-plugin组合可能误删“无效”选择器，检查压缩后 CSS 是否还保留:has()
兜底样式必须独立于 :has()
别指望“渐进增强”：把 :has() 当主逻辑、JS 当备选，会导致 Safari 15.3 用户看到未高亮的错误表单。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 所有关键状态（如错误、聚焦、成功）都用 JS 设置
data-属性，CSS 全部基于这些属性写 -
:has()规则只作为“零 JS 增强层”，放在单独的@supports selector(:has(*)) { ... }块里，避免污染基础样式流 - 测试时禁用 JS，确认页面核心功能（如错误提示可见性）仍可用——这才是兼容性的底线
:has() 的缺失意味着整个交互链断裂。这时候，与其硬扛兼容性，不如推动组件 API 层面暴露状态，把“谁该高亮”的决策权交给业务逻辑，而不是 CSS 选择器。 
