Wie kann eine zuvor angegebene CSS-Regel unterdrückt werden? (Background-color)

Question

In Bootstrap gibt es eine CSS-Regel, die

.nav>li>a:focus, .nav>li>a:hover { 
    text-decoration: none; 
    background-color: #eee; 
} 

sagt, ich möchte die Regel zu unterdrücken background-color ohne es zu überschreiben.
Denn wenn ich diese zu meinen benutzerdefinierten style.css hinzufügen:

.nav>li>a:focus, .nav>li>a:hover { 
    background-color: inherit; 
} 

... werden die Elemente haben einen weißen Hintergrund.

Die gewünschte Wirkung ist die Linie background-color: #eee;

Um die Farbe zu halten, definiert in der Klasse .btn-Primär zu unterdrücken.

Das HTML sieht wie folgt aus

<ul class="nav nav-pills nav-stacked"> 
    <li role="presentation"><a class="btn btn-info" href="#">AAA</a></li> 
    <li role="presentation"><a class="btn btn-primary" href="#">BBB</a></li> 
</ul> 

Answer 1

Im head Abschnitt Ihrer HTML, schließen Sie Ihre custom.css Datei nach bootstrap.css und fügen !important nach inherit.

Es sollte den Trick tun.

.nav>li>a:focus, .nav>li>a:hover { 
    background-color: inherit !important; 
} 

Oder Sie können unset verwenden:

.nav>li>a:focus, .nav>li>a:hover { 
    background-color: unset !important; 
} 

https://developer.mozilla.org/en/docs/Web/CSS/unset