新版浏览器已原生支持:is()、:where()、:has()等复合选择器，应采用分层渐进策略：优先用兼容性好的:is()简化选择器，用权重为0的:where()做无侵入式样式，谨慎以:has()作增强并配@supports降级，辅以postcss和ci校验保障兼容性。
新版浏览器已原生支持更语义化、更强大的复合匹配选择器（如 :is()、:where()、:has()），但直接上线可能引发旧版兼容问题。安全优雅的关键不是“等所有用户升级”，而是分层渐进——用现代语法写核心逻辑，用降级策略兜底关键样式。
优先用 :is() 替代长并集选择器
它能大幅简化重复代码，且兼容性极好（Chrome 105+、Firefox 103+、Safari 15.4+，Edge 同 Chrome）。比手写一串逗号分隔的选择器更可读、更易维护。
- ✅ 推荐写法：
:is(h1, h2, h3) { line-height: 1.3; } - ❌ 避免写法：
h1, h2, h3 { line-height: 1.3; }（语义弱、难扩展） - ⚠️ 注意：
:is()内部选择器的权重取最高值，但整体选择器权重仍按最外层计算，不会意外提升优先级
用 :where() 实现无侵入式重置与工具类
当你需要给一组元素统一加样式，又不想干扰已有优先级（比如重置按钮默认边距、定义辅助文本色），:where() 是理想选择——它的权重恒为 0，天然不打架。
- ✅ 场景示例：
:where(.text-sm, .text-xs) { font-size: 0.875rem; }—— 加了也不会覆盖button { font-size: 1rem; } - ✅ 安全兜底：即使老浏览器忽略整条规则，也不影响布局，因为没副作用
- ⚠️ 不适用场景：不能用于需要高权重覆盖的地方（如强制覆盖第三方库样式）
谨慎引入 :has() 并设置视觉降级
:has() 支持父元素根据子元素状态反向选中（如 article:has(> .featured)），但目前仅 Chrome 105+、Safari 15.4+、Firefox 121+ 原生支持，IE 和旧 Edge 完全不识别。
- ✅ 推荐策略：只用于增强体验，不用于布局或功能依赖。例如给含图片的文章卡片加阴影，但无阴影时视觉依然完整
- ✅ 降级写法：先写基础样式，再用
@supports (selector(:has(*)))包裹增强规则 - ❌ 避免：用
:has()控制显示/隐藏、宽高或 flex 排列——一旦不支持，布局会崩
构建兼容性检查与自动化提示
光靠记忆版本不现实。在开发流程中嵌入轻量级保障：
- 用 PostCSS 插件（如
postcss-preset-env）自动将部分新语法转译或打标，同时保留原生语法供现代浏览器直用 - 在 CI 中跑 CanIUse 数据校验：检测项目中使用的 CSS 特性是否低于目标最低浏览器版本
- 在关键组件文档中标注 “
:has()required” 或 “:is()enhanced”，让协作开发者一眼知风险
