移动端 :has() 可用，但需确保 Chrome for Android 105+、Firefox for Android 119+ 或 iOS 16.4+ Safari；旧版 Safari 静默忽略，Electron 多不支持，须用 @supports 检测并配 JS 回退。
移动端 :has() 能用吗？先看浏览器支持底线
能用，但必须确认目标用户环境：Chrome for Android 105+、Firefox for Android 119+、Safari on iOS 16.4+（注意不是 iOS 15.4，那是桌面 Safari 的起点）已稳定支持 :has()；iOS 15.4–16.3 的 Safari 移动端会静默忽略整条规则，连降级样式都不触发。Electron 内核（如部分跨端 App）大概率不支持，别赌。
实操建议：
- 用
@supports selector(:has(*))包裹关键逻辑，内部写:has()规则，外部写 JS fallback 或 data-属性驱动的 class - 不要依赖
:has(input:focus)—— 移动端软键盘唤起/收起时 focus 状态不稳定，:focus-within更可靠，但:has(:focus-within)在 Safari 16.3 及更早版本不支持 - 真要监听输入状态，优先用
:has(input:invalid:not(:placeholder-shown))，它比 JS 监听 blur 更轻量，且避开软键盘干扰
:has() 在移动端常见失效场景和绕过方式
不是语法错，而是 DOM 结构或状态匹配不上。典型静默失败包括：
-
.field:has(input:checked)生效，但.field:has(label:checked)失效 —— 因为label本身不带:checked，真正状态在关联的input上 - 用
[data-open="true"]控制菜单展开，但 JS 只改了el.dataset.open = "true"，没调el.setAttribute('data-open', 'true')→:has([data-open="true"])永远不匹配 - 子元素是通过
v-if或*ngIf动态渲染的，但框架插入节点时用了display: none占位而非真实移除 ——:has(.submenu)仍会匹配到隐藏元素 - Flex/Grid 容器内子项用
order改变视觉顺序，但:has()匹配仍按 DOM 顺序，不是渲染顺序
移动端滚动容器检测：用 :has() 替代 JS 监听 scrollWidth
需要“内容超宽才显示右阴影”时，JS 持续监听 scrollWidth > clientWidth 在低端安卓机上掉帧严重。用 :has() 可无损实现：
<div class="scroller"> <div class="scroller__content">...</div> <div class="scroller__anchor" style="width: 100.1%;"></div> </div>
对应 CSS：
.scroller {
overflow-x: auto;
position: relative;
}
.scroller:has(.scroller__anchor)::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1));
pointer-events: none;
}
关键点：
-
width: 100.1%必须带小数点，整数如101%在某些缩放比例下会被四舍五入回100%，导致:has()不触发 -
::after需加pointer-events: none，否则遮挡滚动操作 - 不要用
min-width或flex-basis替代width——:has()只响应渲染后的真实尺寸
为什么父容器加了 border 却“看不见”？移动端渲染陷阱
:has() 选中父元素并设置 border 或 background 后，在移动端常“没反应”，不是语法问题，而是层叠上下文和渲染时机：
- 父容器若设了
overflow: hidden，而子元素有transform或position: absolute，border 可能被裁剪 —— 改用outline或给父元素加position: relative - Flex/Grid 布局下，父容器高度由子项撑开，
:has()触发时子项可能尚未完成 layout，导致 border 渲染位置偏移 —— 加will-change: transform提示浏览器提前准备 - 阴影类效果（如
box-shadow）在部分安卓 WebView 中需配合backface-visibility: hidden才生效 - 最稳妥做法：用
:has()切换一个 class，再用该 class 控制 border/background，避免纯:has()直接写样式
复杂点在于：移动端浏览器对 :has() 的重绘优化更激进，DOM 更新和样式计算之间可能存在微小延迟，尤其在快速手势操作中。别指望它像 JS 那样“立刻响应”，把它当渐进增强用，核心交互逻辑仍要保底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
