html - css active 不会工作，只有默认的 bootstrap active class 会

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