Question

为导航栏的有效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

将您的引导样式更改为

.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 2

请在您的解决方案中应用此代码

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

Answer 3

避免important!这只是糟糕的css练习。而是添加：

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

PS：关于为何不使用!important的更多信息： What are the implications of using "!important" in CSS?

Answer 4

您应该在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;
}

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

4 个答案: