按钮的Background-Color与Animation效果不显示/不生效问题求助

• 优先级覆盖排查：
  打开浏览器开发者工具，选中目标按钮元素，查看样式面板中background-color属性是否被划去，若被划去说明你的自定义样式被更高优先级的规则覆盖，常见的覆盖来源包括全局CSS重置规则、第三方UI组件库的内置按钮样式、同页面内层级更高的选择器规则。可通过提升自定义选择器权重（比如增加类名层级、结合元素选择器）解决，临时测试可加!important验证是否为优先级问题，生产环境不建议滥用!important。
• 动画规则编译错误排查：
  SCSS中如果把@keyframes定义嵌套在其他选择器内部，编译后会自动带上父选择器前缀，导致你写的animation属性引用的动画名和实际编译后的动画名不匹配，动画直接失效。需要把@keyframes的定义放到全局作用域，不要嵌套在任何选择器内部，同时要确认动画名的拼写完全一致，没有大小写或者拼写错误。
• SCSS变量引用错误排查：
  如果背景色值、动画时长/延迟等参数用了SCSS变量存储，要确认对应变量已经提前声明，跨文件使用时已经正确@use/@import对应的变量文件，变量名拼写错误会导致属性值无效，浏览器直接忽略对应的样式规则。
• 原生元素默认样式干扰排查：
  原生button元素不同浏览器都内置了默认的背景、边框样式，需要先做基础重置再写自定义样式，示例重置代码如下：

.custom-btn {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  cursor: pointer;
  // 后续写你的自定义背景色、动画规则
}

• 交互触发逻辑排查：
  如果动画是hover、focus、active等交互态才触发，要确认SCSS嵌套书写正确，比如&:hover必须写在按钮选择器的内部，前面不要加多余空格，避免编译后变成后代选择器，无法匹配到按钮的交互事件。

内容的提问来源于stack exchange，提问作者reewebza