CSSクラスの優先順位付け方法は？

Question

私はいくつかのブートストラップスタイルシートに参照していると私はこのスタイルを使用したいがため、私のHTML class="alert-success badge"に、それは今、他の定義

.panel-default>.panel-heading .badge { 
    color: #f5f5f5; 
    background-color: #333; 
} 

によって上書きされます

.badge { 
    display: inline-block; 
    min-width: 10px; 
    padding: 3px 7px; 
    font-size: 12px; 
    font-weight: 700; 
    line-height: 1; 
    color: #fff; 
    text-align: center; 
    white-space: nowrap; 
    vertical-align: middle; 
    background-color: #777; 
    border-radius: 10px; 
} 
.alert-success { 
    color: #3c763d; 
    background-color: #dff0d8; 
    border-color: #d6e9c6; 
} 

の定義があります後者の定義はより具体的であり、私が望むCSSよりも優先されます。どうすれば解決できますか？

編集： この問題を抱える他の多くのクラスがあります。 1つ1つ指定する必要はありませんか？

Answer 1

CSS Specificityとすると、より具体的なセレクタを自分でオーバーライドするだけで済みます。

.panel-default > .panel-heading .badge.alert-success { 
    color: #3c763d; 
    background-color: #dff0d8; 
    border-color: #d6e9c6; 
} 

編集：その他のオプションを含めることができます。

1. を問題のCSSファイルを変更/削除する（ブートストラップでは難しいが、なんとか、およびメンテナンス頭痛あなたはbootstrap.cssを更新することにした場合）
   • 更新/特定のシナリオを回避するために:not()セレクタを追加問題のセレクタ
   • を除去
2. HTML構造を変更してNOTのCSSセレクタに従います。あなたはたくさんのを持っている場合
   • クラス名を変更し、および/または使用して新しいものが
   • の挿入/追加のネストされたdivを削除/要素は、

ありがたい（>直接の子セレクタを避けるため）クラスを更新するには、smart regex replaceがあなたの親友ですが、それは別の話題です。

Answer 2

シンプルで洗練されたソリューションがないようですので、簡単な回避策をとっただけです。バッジCSSをコピーして、ブートストラップバッジクラスを使用する代わりに新しい名前を付けました。悲しい。

.panel-default > .panel-heading .alert-badge { 
    display: inline-block; 
    min-width: 10px; 
    padding: 3px 7px; 
    font-size: 12px; 
    font-weight: 700; 
    line-height: 1; 
    text-align: center; 
    white-space: nowrap; 
    vertical-align: middle; 
    border-radius: 10px; 
} 

Answer 3

IDセレクターは、CLASSより高い特異度優先度を有する。あなたはIDを追加することができる場合、それは.panel-default>.panel-heading .badge

.panel-default>.panel-heading .badge { 
    color: #f5f5f5; 
    background-color: #333; 
} 

#custom.badge{ 
    background-color: #f00; 
} 


<div class="panel panel-default"> 
    <div class="panel-heading"> 
    <div class="badge">class target</div> 
    <div id="custom" class="anything badge">id target</div> 
    </div> 
</div> 

オーバー乗るここで特異性のためにmozillaのdocumentaionは、 https://developer.mozilla.org/en/docs/Web/CSS/Specificity

感謝です！

Answer 4

解決策がcssとして登録されているかどうかわかりません。私はこれをして結果を得ることさえしなければならなかった。私は、CSSが構文上の賢明さから離れていると思います。

.panel-default > .panel-heading, .panel-default > .badge{ 
    color: #f5f5f5; 
    background-color: #333; 
} 

今回は自分のコードを実際にテストしたため、私はこれに気付きました。