Active navbar link Hintergrundfarbe kleben auf seine Standard

Question

Haben benutzerdefinierte CSS für aktive li-Elemente der Navbar hinzugefügt. Aber sie scheinen die standardmäßige schwarze Hintergrundfarbe zu wählen. Ich möchte die Hintergrundfarbe auf # 428BCA ändern. Andere Elemente der Navigationsleiste ändern ihre Farben entsprechend dem Code.

Mein CSS-Code ist wie folgt:

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; 
} 

ich die Geige bin Entsendung genau mein Problem zu erklären:

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

Bitte helfen Sie mir mit diesem. Es ist nur schlecht CSS Praxis

Answer 1

Sie sollten die CSS Hintergrund-Eigenschaft auf die #nav-right > .active > a statt #nav--right > .active im CSS-Code geben. Dies liegt daran, dass der Bootstrap keine Hintergrundeigenschaft auf das Element <li> anwendet, sondern stattdessen auf das Element <a> anstelle des Elements <li>. Und wenn die Verknüpfung aktiviert wird, wird die aktive Klasse zum Element <li> hinzugefügt. So sollten Sie Ihre CSS-Code wie folgt aussehen:

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

Veränderung in der Bootstrap-Stil als

.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

bitte diesen Code auf Ihrer Lösung

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

Answer 4

Vermeiden important! gelten. Stattdessen fügen Sie diese:

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

PS: Mehr darüber, warum nicht !important verwenden: What are the implications of using "!important" in CSS?