浏览器不解析:has()是最常见失效原因，因ios 15.3及更早safari、旧版electron、微信x5内核等直接忽略整条规则；唯一可靠验证方式是css.supports('selector(:has(*))')返回true。
浏览器根本不解析 :has() 是最常见“失效”原因
不是你写错了，而是浏览器压根没认这个语法——尤其在 iOS 15.3 及更早的 Safari、旧版 Electron、微信 X5 内核里，:has() 规则会被整条忽略，DevTools 的 Styles 面板里根本看不到它。
验证是否可用的唯一可靠方式是运行：CSS.supports('selector(:has(*))')。返回 true 才能用；返回 false 就必须降级。
- Chrome 105+、Firefox 119+、Safari 15.4+ 支持原生
:has() - Firefox 119 之前需手动开启
layout.css.has-selector.enabled - Tailwind 用户必须在
tailwind.config.js中显式启用：corePlugins: { has: true }，否则has-[&_*]类名会被完全跳过
:has() 里哪些子选择器能用、哪些会静默失败
不是所有伪类或选择器都能塞进括号里。浏览器对内部选择器的合法性检查很严格，写错就直接丢弃整条规则。
- ✅ 安全可用：
input:checked、input:invalid、[open]、.error、[data-status="done"]（注意引号） - ❌ 无效或不可靠：
::before（伪元素语法非法）、:hover（非交互元素如div在 Safari 中常不触发）、:focus-within（嵌套使用时兼容性差）、:nth-child(2)（结构伪类不被支持） - ⚠️ 注意层级：
parent:has(.child)匹配任意后代；parent:has(> .child)要求必须是直接子元素，两者语义不同，别混用
父元素样式没变？先看 DevTools 里这条规则是否存在
如果 :has() 规则出现在 Styles 面板但被划掉，说明它被更高权重的样式覆盖了——比如父元素本身有 !important 声明，或者层叠顺序靠后。
-
label:has(input:checked)和label权重相同，靠书写顺序决定胜负 - JS 修改
dataset不会触发:has([data-valid="true"])，必须调用el.setAttribute('data-valid', 'true') -
:has()不穿透 Shadow DOM，shadowRoot内部状态无法影响 light DOM 中的父元素 - 动态插入的子元素（如
appendChild()）能即时触发匹配，但若父元素本身是 JS 创建后才插入 DOM，规则不会预生效
性能和可维护性容易被低估的点
:has() 是关系型选择器，浏览器需向上遍历 DOM 树做匹配，不是简单查 class。嵌套越深、目标越多，渲染开销越大。
- 避免链式写法：
.form:has(.field):has(.field.error):has(.field:last-child)—— 浏览器要跑三次独立匹配 - 慎用在高频更新场景（如滚动、动画），优先选
transform/opacity等合成属性，避开width、margin触发重排 - 不要把它当 JS 替代品：表单校验这类逻辑，用 JS 控制 class 比堆一堆
has-[&_*]更可控、更易调试
真正麻烦的从来不是怎么写对，而是什么时候不该用——尤其当你不确定用户用什么 WebView 或是否真能升级到 Safari 15.4+ 时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
