主动的Navbar链接背景颜色贴在其默认值为默认状态

Question

已为Navbar的活动LI元素添加了自定义CSS。但是他们似乎正在选择默认的黑色背景颜色。我想将其背景颜色更改为＃428BCA。Navbar的其他元素正在根据代码更改其颜色。

我的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代码中将CSS背景属性提供给#nav-right > .active > a而不是#nav--right > .active。这是因为Bootstrap不将背景属性应用于<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

的bootstrap样式更改

.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的更多信息：使用"！在CSS？