移动端使用 :is() 和 :where() 风险极高，iOS 15.3 及更早、Android WebView ≤103、微信 X5 ≤v13.0 均不支持，需用 @supports 检测并提供降级方案，且必须真机实测。
移动端直接用 :is() 和 :where() 风险极高，必须加 @supports 检测或降级，否则 iOS 15.2–15.3、Android WebView 旧版会整条规则静默失效。
哪些移动端环境根本不支持 :is() 和 :where()
不是“部分不支持”，而是关键节点彻底缺席：
- iOS Safari ≤ 15.3（2022 年初发布）：
@supports selector(:is(*))返回false，且不会报错，样式直接消失 - Android WebView ≤ 版本 103（对应 Chrome 103，2022 年中）：很多 OEM 定制系统仍卡在 WebView 91–97，
:is()解析失败即丢弃整条规则 - 微信内置浏览器（X5 内核）≤ v13.0（2023 年底前）：即使 UA 声称支持，实际解析常崩溃，尤其含复杂嵌套时
真正在移动端安全用 :is() 的写法
核心原则：只用于语义明确、权重可控、且已验证兼容的场景。不能为“简洁”牺牲稳定性。
- 避免混用高权重选择器：
:is(#header, .nav, div)在移动端会因#header权重飙升，意外覆盖第三方组件样式；改用纯类名：:is(.header, .nav, .footer) - 必须包裹
@supports，且降级方案要完整：@supports selector(:is(*)) { :is(section, article, aside, nav) .title { font-weight: bold; } } @supports not selector(:is(*)) { section .title, article .title, aside .title, nav .title { font-weight: bold; } } - 禁止在媒体查询内嵌套
:is()做响应式切换（如@media (max-width: 768px) { :is(.btn, .link):hover { ... } }），旧引擎易解析中断
为什么 :where() 在移动端更值得优先考虑
它不是“更安全”，而是“失效代价更低”——权重恒为 0，即使被忽略，也不会拖垮其他规则。
立即学习“前端免费学习笔记（深入）”；
- 适合做兜底重置：
:where(button, [role="button"], input[type="submit"]) { cursor: pointer; }，就算不生效，也不影响已有按钮 hover 样式 - 可放心用于设计系统基底层：
:where([class*="text-"]) { line-height: 1.5; }，匹配所有text-sm/text-lg类，但绝不干扰.card .text-base这类高权重组合 - 注意陷阱：
:where()不降低外部选择器权重，.modal :where(button)的权重仍是.modal级（0-1-0），不是 0
真正容易被忽略的点是：移动端 CSS 加载路径短、解析快，但容错极差；:is() 和 :where() 的语法错误（比如多一个空格、逗号后少元素）在桌面端可能只警告，在移动端常直接跳过整条规则——连 DevTools 的 Styles 面板里都看不到它。别依赖“看起来正常”，一定要在真机 WebKit 和旧版 Android WebView 上实测。
