CSSをオーバーライドするにはどうすればよいですか？

Question

次の例では

http://jsfiddle.net/xBRPg/

私は私のテーブルの行のいずれかの黄色の背景を作成しようとしています。次のコード行

<table class="table table-bordered table-striped"> 

私自身のスタイリングに取って代わるものと思われます。クラスを削除すると、行は黄色で表示されます。クラスを維持するためのいくつかの方法はありますか？ただし、色が優先されるように設定をオーバーライドしますか？

Answer 1

これはCSSの特異性のために発生します。table.table-striped trはtable trより具体的です。より具体的なルールは、より特定のルールを優先します。私の意見では、できるだけ長く!importantを避け、セレクタをより具体的にすることに重点を置いてください。したがって、あなたのケースでは、次のようにしてください。

table.table-striped tr.zebraHover td { 
    background-color: #FFFACD; 
} 

Answer 2

行は、黄色である。その内部のセルは＃f9f9f9なので、行の背景色を見ることはできません。

行自体ではなく、行内のセルと一致するようにセレクタを変更する必要があります。セレクタのspecificityを増やす必要があります。これは、既に使用されているものがより具体的であるためです。あなたのCSSの

Answer 3

変更この

tr.zebraHover td { 
      background-color: #FFFACD !important; 
} 

そして、はい、私はそれが非常に汚れている知っています。誰かがこれをよく知っているなら、私の答えにコメントしてください。私はより良い解決策を知りたいと思うでしょう！

Answer 4

クラスをIDに変更してください。

CSS：

#zebraHover td{ 
      background-color: #FFFACD; 
     } 

HTML

<tr id="zebraHover"> 
    <td>1</td> 
    <td>User1</td> 
    <td>user1@gmail.com</td> 
    <td><a class="btn btn-danger" href="#">Deactivate</a></td> 
</tr> 

http://jsfiddle.net/xBRPg/

Answer 5

問題は、高い特異性でセレクタを使用して行の背景色を交互に設定したルールによって引き起こされます。これらを適切に無効にするには、たとえば

tr.zebraHover, 
    .table-striped tbody tr:nth-child(2n+1).zebraHover td 
    { 
     background-color: #FFFACD; 
    }