旧版 safari 和部分双核浏览器会静默丢弃含 :is() 的整条 css 规则，导致样式完全失效；推荐构建时展开为逗号分隔形式，并慎用 :where() 回退。
旧版 Safari 遇到 :is() 会直接丢弃整条规则
不是降级、不是忽略错误项，而是整个 CSS 规则失效——这是最危险的兼容性问题。尤其在 Safari 15.2–15.3 中，只要 :is() 括号里有一个无效选择器（比如拼错的 .btn-prmary 或不支持的伪类），浏览器就静默丢弃该行样式，连带其他正确项也一并失效。
验证方式：打开 DevTools → Elements 面板 → 找目标元素 → 查看 Styles 标签页，如果本该生效的规则完全不显示（而非被划掉），大概率是这个原因。
- 别写
:is(.a, .b, invalid-selector)—— 即使只错一个，整行归零 - 避免在
:is()里混用高风险语法，如:nth-child(2n+1)、[class*="btn"]（部分旧 Safari 不认） - CI/CD 中可用 Puppeteer + 真机截图比对，或用 caniuse 的「partial support」标记做拦截
360/QQ 浏览器等 Chromium 双核引擎不识别 :is()
这类浏览器虽基于 Chromium，但 CSS 解析引擎未同步新版规范，:is() 直接被当作非法语法跳过，且无任何 warning。它们不会 fallback 到逗号分隔形式，也不会报错，只是静默忽略整条规则。
真实影响：你写的 :is(header, main, footer) h1 在这些浏览器里等于没写，标题样式全丢失。
- 不能依赖 User-Agent 检测来开关 CSS —— 这些浏览器 UA 伪装成 Chrome，但行为不一致
- 必须用构建时处理：Vite 插件（如
vite-plugin-css-legacy）或 Webpack 的postcss-preset-env展开:is()成传统逗号列表 - 展开后注意 specificity 一致性：原
:is(.btn, div#submit)展开为.btn, div#submit，权重差异保留，别指望自动“降权”
用 :where() 回退时，优先级归零不是万能解药
:where() 确实能绕过 Safari bug 和双核浏览器不支持问题，但它把整个选择器的 specificity 强制设为 0-0-0，这会导致它无法覆盖已有高权样式。
例如你用 :where(button, [type="submit"]) { color: red; }，结果被第三方库的 button.btn-primary { color: blue; } 覆盖，因为后者 specificity 是 1-1-1，而 :where() 版本是 0-0-0。
- 只适合重置类场景：字体、颜色、box-sizing 等基础装饰属性
- 千万别用
:where()替换需要精确层叠控制的选择器，比如组件内状态样式（:hover、:focus） - 回退策略要分层：
:is()用于现代环境，:where()仅作兜底，其余一律靠构建时展开
构建时展开 :is() 是目前最稳的兼容方案
PostCSS 插件（如 postcss-is-pseudo）能把 :is(h1, h2, h3) 编译成 h1, h2, h3，把 :is(.card, .post) h2 编译成 .card h2, .post h2，完全规避运行时兼容问题。
但要注意展开后的体积和可读性：嵌套越深，生成的选择器越多；一个 :is(.a, .b, .c) :is(h1, h2) 会炸出 6 条规则。
- 展开前先人工评估必要性：只有重复 ≥3 行、且结构稳定的选择器才值得用
:is()再展开 - 禁用 CSS 压缩工具对
:is()的误删（如旧版cssnano可能直接剔除不认识的伪类） - 展开后务必检查 DevTools 中 computed styles，确认 specificity 和匹配结果与预期一致
:is() 早在 Safari 15.2 里就被悄悄扔掉了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
