无法更改 Bootstrap CSS 导航栏颜色

Question

我正在使用 bootstrap CSS 导航栏，我无法更改导航栏内文本的颜色。这是我的 html 代码：

    <nav class="navbar navbar-default navbar-fixed-top" ng-controller="NavCtrl">
       <ul class = "nav navbar-nav">
         <li><a class = "nav_color"><span class="glyphicon glyphicon-user"></span> UserName </a></li>

         <li><a class = "nav_color"><span class="glyphicon glyphicon-book"></span> Book </a></li>

         <li><a class = "nav_color"><span class="glyphicon glyphicon-pencil"></span> Pencil </a></li>
       </ul>
    </nav>

这是我的 css 代码：

    .nav_color {
       color: red;
    }

我不明白为什么这不起作用

Answer 1

AXC, 你好。

试试看这个。

.nav.navbar-nav li a {
    color: red;
}

Answer 2

您可以使用 !important.

.nav-color {
    color: red !important;
}

发生的事情是 CSS 具有特定的 优先级 来应用样式。其中一个因素是 特异性计算 。更具体的规则（如 Bootstrap 定义的规则）比其他更通用的规则（如你的 class）具有更高的优先级。如果您使用 !important，您可以覆盖该规则的优先级。

有关详细信息，请查看 this article。

无法更改 Bootstrap CSS 导航栏颜色

Unable to change Bootstrap CSS Nav Bar Color

twitter-bootstrap

css

colors

uinavigationbar