Cambiar el color del elemento de navegación activo

Tengo una navbar diseñada en Bootstrap. Estoy tratando de hacer que sea de un color diferente cuando la clase del nav-item está configurada como active .

Sin embargo no puedo hacerlo. Cuando configuro el background el color de fondo está cambiando, pero cuando uso el color el color no está cambiando. Tenga en cuenta que estoy usando Bootstrap v4.

 $(document).ready(function() { "use strict"; $('ul.navbar-nav > li').click(function(e) { e.preventDefault(); $('ul.navbar-nav > li').removeClass('active'); $(this).addClass('active'); }); }); 
 .navbar-toggler:focus { outline: 0; } .navbar-nav > .active { color: aqua!important; **// THIS DOES NOT WORK** background-color: chartreuse; **//THIS WORKS** } .nav-item > a:hover { color: aqua!important; } 
   

El problema es porque el .nav-item > a:hover es más específico que .navbar-nav > .active . Para solucionar esto, elimine el operador !important (ya que debe evitarlo a toda costa) y haga que la regla que desea reemplazar sea más específica.

 .navbar-nav > .active > a { color: aqua; background-color: chartreuse; } .nav-item > a:hover { color: aqua; } 
 $(document).ready(function() { "use strict"; $('ul.navbar-nav > li').click(function(e) { e.preventDefault(); $('ul.navbar-nav > li').removeClass('active'); $(this).addClass('active'); }); }); 
 .navbar-nav > .active > a { color: aqua; background-color: chartreuse; } .nav-item > a:hover { color: aqua; } 
      

Intente agregar CSS de color en la etiqueta a:

 .navbar-nav > .active a{ color : aqua; } 
 .navbar-toggler:focus { outline: 0; } .navbar-nav > .active { color : aqua!important; **// THIS DOES NOT WORK** background-color: chartreuse; **//THIS WORKS** } .navbar-nav > .active a{ color : aqua } .nav-item > a:hover { color : aqua!important; } ul li{ list-style:none; margin: 10px } 
   
 .active a{ color: red !important; } 

Esto debería funcionar para anular el tema de bootstrap 4 personalizado.