无法在bootstrap 3中更改导航栏的颜色？

Question

我按照这篇文章来定制导航栏。 同时我遇到了使用简单导航栏类的链接 。 所以我从那里借了这个

.navbar.navbar-www {
    background-color: #3E8956;
    border-color: #3E8956;
}

并在上面的链接中声明如下nav ：

<nav class="navbar navbar-fixed-top navbar-inverse navbar-www" role="navigation">

我在bootstrap.css之后加载了custom.css，我的custom.css上面有navbar-www的css。 即使在那之后，我的导航栏仍然是黑色（navbar-inverse）。 但在开发人员工具中，我可以看到它被覆盖到navbar-www的custom.css背景颜色。

我无法弄清楚为什么会发生这种情况以及如何解决这个问题？

编辑：修复了类.navbar .navbar-www的拼写错误

Answer 1

可以改进选择器.navbar.navbar-www的强度。 可能其他浏览器可能会理解你的浏览器比另一个更重要。 尝试更具体的选择器，它不会被覆盖！

例如：

• .navbar.navbar-www.navbar-fixed-top
• .navbar.navbar-www.navbar-inverse
• .navbar.navbar-www.navbar-inverse.navbar-fixed-top
• .someClass .navbar.navbar-www
• nav.navbar.navbar-www

Answer 2

尝试添加样式到锚标记

.navbar.navbar-www a{
  background-color: #3E8956;
  border-color: #3E8956;
}

Answer 3

写下自定义CSS填写如下

.navbar.navbar-www {
    background-image: linear-gradient(rgb(240, 16, 16) 0px, rgb(249, 18, 18) 100%);
    border-color: #3E8956;
}

你的问题将得到解决。

你可以参考bootstrap官方文档，你可以发现默认导航栏背景描述为background-image，背景图像和背景颜色的优先级，不同的背景图像比背景颜色更强大。

Answer 4

这是我做的，它应该在您的CSS文件中正常工作：

 .navbar.navbar-xxx{
   background-color: #000000;
   border-color: #c0392b;
 }