ブートストラップボタンCSSの変更が有効でない：アクティブセレクタ

Question

私はブートストラップ3.3.7ボタンを使用しています。マウスがフォーカス、ホバーまたはクリックすると、同じ色を保ちます。私は私のCSSセレクタの背景色を変更するのはここ

<button class="btn btn-default delete-btn">Delete</button> 

は次のとおりです。

.delete-btn:hover, .delete-btn:focus, .delete-btn:active { 
    background-color: white; 
} 

これは、フォーカスやホバーイベントのためだけで正常に動作します。

ただし、マウスがボタンをクリックすると、デフォルトの灰色に変わります。私がここで紛失しているものは何ですか？私の頭を傷つける...

Answer 1

の既定のスタイルを置き換えるために、あなたのスタイルで重要：！

.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover 

.btn-default:active:focusと.btn-default:active:hoverは、唯一の疑似クラスとセレクタよりも固有のものです。

あなたのセレクタが均等に特定行う必要があります。

.delete-btn:hover, .delete-btn:focus, 
.delete-btn:active:hover, .delete-btn:active:focus, { 
    background-color: white; 
} 

Answer 2

このようなコードの最後に重要なものを追加してみてください：background-color: white!important;。

Answer 3

ブートストラップのデフォルトCSSをあなたのものに置き換え、あなたのCSSに優先権を与えるあなたのCSS属性の後ろに重要なものを追加してください。

.delete-btn:hover, .delete-btn:focus, .delete-btn:active { 
       background-color: white !important; 
       box-shadow: none !important; 
      } 

Answer 4

のみ.delete-BTNのセレクタ.btn.btn-default.delete-BTN instreadを試して、重要な使用---：このCSSを追加します。

これ以外の場合は、ブラウザの要素を調べてグレーの色を見つけて、CSSルール全体を白色に置き換えます。

これ以外の場合は、JavaScriptで何か問題が発生していないかどうかを確認して、カラールールをclickイベントに置き換えてください。

Answer 5

使用ブートストラップスタイルシートは、セレクタのこのセットを持って、ブートストラップ