html - Bootstrap 导航栏不尊重文本颜色

Question

我有以下 HTML 作为我的导航栏:

<div id='container_1'>
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <ul class='nav navbar-nav'>
                  <li><a class="navbar-brand" id='navbar_1' href="#">Home</a></li>
                  <li><a class="navbar-brand" id='navbar_2' href="#">Works</a></li>
                  <li><a class="navbar-brand" id='navbar_3' href="#">Blog</a></li>
                  <li><a class="navbar-brand" id='navbar_4' href="#">Resume</a></li>
                  <li><a class="navbar-brand" id='navbar_5' href="#">Contact</a></li>
                 </ul>
            </div>
            <div id="appily_header"><h3>Appily</h3></div>
        </div>
    </nav>
    <div class="row">
        <div class="col-sm-2 col-sm-push-2" id='iphone_image'>
        </div>
        <div class="col-sm-8">
        </div>
    </div>
</div>

而且我无法让导航栏中的文本符合我的 CSS 样式。

但我不明白为什么...

.navbar-brand{
     color: white;
}

...不会设置文本样式，但是

#navbar_1{
    color: white;
}

有用吗？

编辑

我不得不添加 !important....不幸的是。

Answer 1

颜色没有因为specificity weight而改变.如果您检查导航栏元素，您会发现 bootstrap 使用以下 css 选择器来设置颜色样式:

.navbar-default .navbar-nav>li>a{
    color:#777;
}

当您尝试使用类更改颜色时:

.navbar-brand{
 color: red;
 }

很明显前者(默认的Bootstrap选择器)高于你的选择器。您可以使用 important 关键字来覆盖默认行为或使用与 Bootstrap 相同的 css 选择器(如果您不想使用 imporat 关键字):

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

最后，您可以使用这个有用的网站来帮助您计算 specificity weight .