引导导航栏手动更改活动锂背景颜色

Question

所以我有固定的bootstrap导航栏，并且其padding-top：50px; 到目前为止很好，但是bootstrap.js和.css文件使单击的li背景色变为白色，我希望它是黑色，我想默认为白色。所以我尝试手动更改.active类的background-color属性

HTML：

<header>
<nav class="navbar navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
        </button>
        <a class="navbar-brand" href="#"><img id="logo-img" src="images/logo.png" alt="logo"></a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-search"></span> Search</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-home"></span> Sales</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="fa fa-cogs"></span> Services</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-comment"></span> Contact</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-link"></span> About Us</a></li>
        </ul>
        </div>
    </div>
</nav>
</header>

在自定义CSS中，我什么都没有发生，但是它不会从白色变为黑色：

.active {
    background-color: black !important;
}

Answer 1

仅更改.active类的背景将不起作用

尝试以下方法：

ul.nav a:hover, ul.nav a:focus, ul.nav a:active { color: #000; }

我没事!important将是必要的