text-underline-offset是调整文字下划线距离的首选方案，但Safari≤15.3不支持，需用::after+ex或box-shadow等兼容方案兜底；scroll-behavior:smooth在Safari≤15.3也不支持，15.4起才稳定支持。
旧版浏览器（如 Safari ≤15.3、Chrome :is() 或 :where()，整条规则被直接丢弃，不是降级，是彻底无视。
遇到 InvalidSelectorError 或样式完全不生效，先确认是否在旧内核里硬塞了新语法
这两个伪类对语法错误极其敏感：多一个逗号、少一个括号、内部含 :hover 这类单独伪类，浏览器会直接抛弃整条 CSS 规则，控制台可能只报模糊的 “Invalid CSS selector”，不提示具体位置。
- 检查是否写了
:is(.btn, .btn-lg, )（末尾多余逗号） - 确认没用
:is(:hover)或:where(.a::before)（伪元素、孤立伪类非法） - 验证目标环境：Safari 15.4+、Chrome 105+、Firefox 103+ 才稳定支持；iOS 15.2 及更早版本的 Safari 会跳过整条
:where()规则
手动拆解必须保留权重一致性，否则覆盖逻辑全乱
:is(.btn, .btn-primary, #submit) 的权重等同于 #submit（0-1-0），但手写成 .btn, .btn-primary, #submit 时，三者权重不同——#submit 会压过前两者，导致你本想统一设置的 cursor: pointer 在 .btn 上被忽略。
- 若原意是提权统一匹配，拆解后所有选择器必须手动拉齐权重，例如全加前缀：
body .btn, body .btn-primary, body #submit - 若原用
:where()是为零权重兜底（比如重置第三方按钮边框），拆解后绝不能直接写.lib-btn, .legacy-submit——得补!important或套一层低权重要素（如div .lib-btn）来模拟 0 权重效果 - 别信“看起来一样就行”：手写逗号分组 ≠ 语义等价，权重差异会在层叠中暴露
用 @supports selector() 做安全降级，别靠 UA 判断
靠 navigator.userAgent 检测浏览器版本极易误判（尤其 Electron、WebView、PWA 场景），正确方式是让 CSS 自己检测特性：
立即学习“前端免费学习笔记（深入）”；
@supports selector(:is(*)) {
:is(button, [type="submit"], .submit-btn) {
cursor: pointer;
}
}
@supports not selector(:is(*)) {
button, [type="submit"], .submit-btn {
cursor: pointer;
}
}
-
@supports selector(:is(*))是最准的运行时判断，比查 Chrome 版号可靠得多 - 不要嵌套
@supports在媒体查询里——部分旧引擎解析失败会导致整块失效 - 降级规则必须和新规则保持完全相同的声明块，避免因属性遗漏引发样式漂移
真正麻烦的不是写错，而是你以为它“只是没生效”，其实它已悄悄破坏了整个层叠顺序——尤其是混用 :is() 提权和 :where() 零权重要素时，旧内核下前者消失、后者也消失，只剩你没意识到的“默认样式空档”。
