活动导航栏链接背景颜色坚持其默认值

Question

为 navbar 的活动 li 元素添加了自定义 CSS。但他们似乎选择了默认的黑色背景颜色。我想将其背景颜色更改为#428BCA。导航栏的其他元素正在根据代码改变它们的颜色。

我的CSS代码如下：

carousel-inner > .item > img, .carousel-inner > .item > a > img {
width: 100%;
margin: auto;
height: 850px;
}
body {
position: relative;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
.navbar {
position:fixed;
top:0;
z-index:10;
width:100%;
background-color:black;
opacity: 0.9;
}
#nav-right>.active{
background-image:none;
background-color: #428BCA;
color: white;
}
#nav-right>.active>li>a, #nav-right>.active>li>a:hover, #nav-right>.active>li>a :focus{
background-image:none;
background-color: #428BCA;
color: white;
}
#nav-right li a {
color: #428BCA;
}
#nav-right li a:hover{
background-color: #428BCA;
color: white;
}
#drop-menu > .active > a, #drop-menu > .active > a:hover, #drop-menu> .active > a:focus {
background-image: linear-gradient(to bottom, #17AA76, #149466);
background-repeat: repeat-x;
color: #FFFFFF;
}
#drop-menu li a:hover {
background-image:none;
background-color:#16A170;
}
#drop-menu li a{
background-image:none;
color: black;
}

我发布小提琴以准确说明我的问题：

https://jsfiddle.net/mukundm/d0Lhvc1z/24/

请帮帮我。

Answer 1

您应该将 css 背景属性赋予 #nav-right > .active > a 而不是 css 代码中的 #nav--right > .active。这是因为引导程序不会将背景属性应用于<li> 元素，而是将其应用于<a> 元素而不是<li> 元素。当链接被激活时，活动类被添加到<li> 元素中。所以你的css代码应该如下：

carousel-inner > .item > img, .carousel-inner > .item > a > img {
width: 100%;
margin: auto;
height: 850px;
}
body {
position: relative;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
.navbar {
position:fixed;
top:0;
z-index:10;
width:100%;
background-color:black;
opacity: 0.9;
}
/* Edited Style */
#nav-right>.active > a, #nav-right>.open>a{
background-image:none;
background-color: #428BCA;
color: white;
}
/* Edited style ends */
#nav-right>.active>li>a, #nav-right>.active>li>a:hover, #nav-right>.active>li>a :focus{
background-image:none;
background-color: #428BCA;
color: white;
}
#nav-right li a {
color: #428BCA;
}
#nav-right li a:hover{
background-color: #428BCA;
color: white;
}
#drop-menu > .active > a, #drop-menu > .active > a:hover, #drop-menu> .active > a:focus {
background-image: linear-gradient(to bottom, #17AA76, #149466);
background-repeat: repeat-x;
color: #FFFFFF;
}
#drop-menu li a:hover {
background-image:none;
background-color:#16A170;
}
#drop-menu li a{
background-image:none;
color: black;
}

Answer 2

改变你的引导风格

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .open > a{

    /* background-image: linear-gradient(to bottom, #080808 0px, #0f0f0f 100%);
    background-repeat: repeat-x;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.25) inset; */
    color: #fff !important; 
    background: #428bca;
}

Answer 3

请将此代码应用于您的解决方案

li.active a{
   background: #428BCA!important;
   color:#fff!important;
 }

Answer 4

避免 important! 这只是糟糕的 css 实践。 而是添加这个：

#nav-right li.active a {
    background: #428BCA;
    color: white; }

PS：更多关于为什么不使用!important： What are the implications of using "!important" in CSS?