如何修改Materialize CSS默认按钮颜色？导航栏按钮自定义CSS失效

我来帮你排查下这个按钮样式没生效的常见原因和解决办法：

• CSS优先级被覆盖
  大概率是框架自带的按钮样式（比如你用了Bootstrap这类UI库）优先级比你的.findbtn类更高。你可以通过提高选择器的权重来解决，比如结合父元素来写选择器：

  /* 针对第4个li里的findbtn按钮 */
  .navbar li:nth-child(4) .findbtn {
    background-color: #2c3e50; /* 替换成你要的颜色 */
    color: #ffffff;
    border-color: #2c3e50;
  }
  

  如果还是不行，也可以临时用!important（不推荐长期使用，会增加样式维护难度）：

  .findbtn {
    background-color: #2c3e50 !important;
  }
  

• CSS文件加载顺序不对
  要是你用了第三方UI框架，务必确保你的header.css是在框架样式文件之后引入的。比如先引入Bootstrap的css，再引入你的自定义css，这样你的样式才能覆盖默认样式。

• 类名或属性拼写错误
  检查下HTML里按钮的class是不是确实写的findbtn（注意大小写，CSS类名是大小写敏感的），同时确认CSS属性有没有写错，比如把background-color写成了background，或者颜色值格式错误（比如漏写了#号）。

• 内联样式冲突
  如果按钮本身加了style属性，内联样式的优先级会比外部CSS高，这时候要么去掉内联样式，要么用上面的!important来覆盖。

另外，推荐用浏览器的开发者工具（按F12）查看这个按钮元素：看看.findbtn的样式是不是被划掉了，如果是，就能看到右边样式面板里哪个样式把它覆盖了，这样就能针对性调整你的选择器啦。

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