El navegador selecciona el CSS que mayor cantidad de coincidencias tenga con el elemento en cuestion, por lo tanto la regla CSS que mejor describa la estructura del HTML es la que sera utilizada.
nav.navbar-default > ul.nav > li.active > a:hover, nav.navbar-default > ul.nav > li.active > a:focus {
background-color: red;
color: white;
}
Nótese que los dos selectores imitan la estructura del HTML que usaste en el ejemplo.
Es importante mencionar que si estas utilizando !important
en alguna parte, ninguna otra regla podrá ganarle a este modificador. Por lo tanto deberás verificar que la clase active
que estas usando en en los <li>
no establezca el color de fondo utilizando !important
.
Por ultimo, si esta regla no funciona, te recomiendo que utilizes el inspector de CSS (F12) para ver que regla esta siendo seleccionada, verificar que no use !important
y entonces crear una mas especifica.
CONSEJO: Nunca uses !important
salvo que falte una hora para hacer una demo. Es una señal de un mal diseño en la estructura de tus CSS(s) y tiene varias desventajas ya que ninguna otra regla puede ganarle (excepto que también use !important
) ni puede modificarse la propiedad CSS usando el atributo style
de html, lo cual interfiere las librerías javascript que usan esta propiedad para hacer su magia.