Question

我已经尝试了一切方法来更改CSS中的活动背景，但是它仅使用默认的btn-primary boostrap活动背景。

 <button id="home" type="button" class="btn btn-primary active" 
href="#home">Home</button>

.btn:active, .btn:hover, .btn:target{
   background-color: rb(0, 0, 0, .7);

}

Answer 1

那是因为CSS specificity。

Bootstrap选择器为.btn-primary:not(:disabled):not(.disabled).active，因此要使用相同的选择器或更具体的选择器来覆盖它...

.btn-primary:not(:disabled):not(.disabled).active {
    background-color: rgba(0, 0, 0, .7);
}

https://www.codeply.com/go/NrPynXwP01

没有理由使用!important ，它是not a good practice。

另请参阅：
Customizing Bootstrap CSS template

Answer 2

强制您的CSS选择器克服Bootstrap CSS选择器。最简单的方法是附加!important：

.btn:active, .btn:hover, .btn:target {
  background-color: rgb(0, 0, 0, .7) !important;
}

您可以阅读有关CSS特异性的更多信息（浏览器如何决定应用哪些相交的CSS规则）here。

Answer 3

两个问题

您错过了rgb中的g，所以必须是background-color: rgb(0, 0, 0, .7)
添加！important以强制执行

代码

<button id="home" type="button" class= "btn-primary active btn" href="#home">Home</button>

CSS

.btn:active, .btn:hover, .btn:target{
   background-color: rgb(0, 0, 0, .7) !important ;
}

Demo

css active将仅在默认的bootstrap active类中起作用

3 个答案: