html - bootstrap 导航栏手动更改事件 li 背景颜色

Question

所以我有 Bootstrap 导航栏，它是固定的，并且有 body padding-top: 50px;到目前为止一切顺利，但 bootstrap.js 和 .css 文件使点击的 li 背景颜色为白色，我希望它为黑色我猜默认为白色。所以我尝试手动更改 .active 类的背景颜色属性

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 是必要的