我将以下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..不幸的是。
由于特异性的重量，颜色没有改变。如果检查导航栏元素，则会发现引导程序使用以下css选择器来设置颜色样式：
.navbar-default .navbar-nav>li>a{
color:#777;
}
当您尝试使用类更改颜色时：
.navbar-brand{
color: red;
}
很明显，前者（默认的Bootstrap选择器）高于您的选择器。您可以使用重要的关键字来覆盖默认行为，也可以使用与Bootstrap相同的css选择器（如果您不想使用imporat关键字）：
.navbar-default .navbar-nav>li>a{
color: red;
}
最后，您可以使用这个有用的网站来帮助您计算特异性权重。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句