如何取消先前规定的CSS规则？ （背景颜色）

Question

In bootstrap there is a css rule that says

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

I would like to suppress the rule background-color without overwriting it.
Because if I add this to my custom style.css:

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

... the elements will have a white background.

The desired effect is to suppress the line background-color: #eee;

To keep the color defined in the class .btn-primary.

The HTML looks like this

<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

In the head section of your HTML, include your custom.css file after bootstrap.css and add !important after inherit .

It should do the trick.

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

Or you can use unset :

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

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