オーバーライドCSSプロパティ

Question

私は2ファイルtheme.cssとmain.cssmain.cssを経由して、私はtdのプロパティをオーバーライドしたい

theme.css

.table td { 
      border-top: 1px solid #e8edf1; 
      vertical-align: top; 
      padding: 5px 5px !important; 
      color: #576475; 
      font-size: 11px; 
} 

のmain.css

.table td { 
      padding: 1px 2px; 
} 

を持っていますの後にmain.cssを含める。

しかし、最終出力はtheme.cssのプロパティをとります。

PS：パディングプロパティのみをオーバーライドします。あなたは、すべてあなたのCSSから!importantキーワードを削除することができた場合は

.table td { 
    padding: 1px 2px !important; 
} 

：最初のCSSルール以来

Answer 1

は!importantは、それを上書きする唯一の方法は、別の!importantのルールを使用している、適用されています。注文を定義するより良い方法があります。

Answer 2

具体的には、毎回!importantが勝ちます。

あなたは実際に!importantの使用を避け、あなたの優位性を特定してください。 CSSファイルを注文することはそれを行う一つの方法です、あなたのルールを注文することはもう一つです。特異性の詳細について

：CSS-Tricks

だから、あなたのケースでは、あなたのtheme.cssファイルから!importantフラグを削除する必要があり、それはそれを解決するだろう。

Answer 3

@Abhishek以下のコードを、ご自分の要件に応じて2つの異なるテーブルの例で確認してください。

table td { 
 
      border-top: 1px solid #e8edf1; 
 
      vertical-align: top; 
 
      padding: 5px 5px !important; 
 
      color: #576475; 
 
      font-size: 11px; 
 
} 
 

 
table.custom_table td{ 
 
    padding: 1px 2px !important; 
 
}

<table> 
 
     <tr> 
 
      <td>fdhf</td> 
 
      <td>dfdfdf</td> 
 
      </tr> 
 
       
 
    
 
</table> 
 
<table class="custom_table"> 
 
     <tr> 
 
      <td>fdhf</td> 
 
      <td>dfdfdf</td> 
 
      </tr> 
 
       
 
    
 
</table>