覆盖Bootstrap的样式_bootstrap li 颜色覆盖-CSDN博客

本文链接：https://blog.csdn.net/elie_yang/article/details/78397801

在学习Bootstrap的导航菜单时，想要改变默认的样式时出现了一点问题。例如下面：

 <link href="resources/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
 <link href="resources/css/index.css?v=1.2" rel="stylesheet" />
 <Body>
   <nav class="navbar navbar-default" role="navigation">
       <div class="container-fluid nav-container">
           <div class="collapse navbar-collapse" id="navbar-collapse">
               <ul class="nav navbar-nav">
                   <li><a>首页</a></li>
                   <li><a>产品展示</a></li>
                   <li><a>代理加盟</a></li>
                   <li><a>合作伙伴</a></li>
                   <li><a>关于我们</a></li>
               </ul>
           </div>
       </div>
   </nav>
 </Body>

如果要改变a 标签的默认颜色，在index.css中写成下面的样式将没有任何效果：

.navbar-nav li a {
    color: white;
    font-size: 16px;
    cursor: pointer;
    min-width: 150px;
    margin-left: 10px;
    margin-right: 10px;
    vertical-align: central;
    text-align: center;
}

是因为css样式的权值问题导致的，如果写成下面的样式则a 标签的文本颜色得到了改变:

#navbar-collapse li a {
    color: white;
    font-size: 16px;
    cursor: pointer;
    min-width: 150px;
    margin-left: 10px;
    margin-right: 10px;
    vertical-align: central;
    text-align: center;
}