CSSルールは別のCSSルールをどのように上書きしますか？

Question

だから、これは私がやっているものです：

#id-form td { 
padding: 0 0 10px 0; 
} 

#particular-td { 
border: 1px solid black; 
text-align: center; 
background-color: #DFDFDF; 
height: 30px; 
padding: 10px; 
} 

私はpadding-bottom: 10pxを持っているすべてのtd秒を設定した上で、テーブル#id-formを、持っています。
しかし、特別な機会に、私はtdにpadding: 10pxの角をつけたいと思っています。私は#particular-tdに設定しました。

明らかに、私はCSSスタイルを連続して外部ファイルに入れています。
レンダリングされたCSSはpadding-bottomしか持たず、padding: 10pxは上書きされているようです！

説明してください：
どのように、なぜこれが起こっているのでしょうか？
私の問題（インラインスタイリング以外）を解決するために、これらのルールをどのように整理すればよいですか？

編集：私はテーブルの#id-formの前に'table'を削除しました。私はこれを使用していない、私はちょうどより良い説明することができるようにここでそれを述べた。

Answer 1

CSS Specificityのため。セレクタの重みが10の重みを持つclass ES、およびelementセレクタは、だからあなたの例では1

の重みで、100の重みを与えられたid年代と、それを構成するコンポーネントに基づいて評価されています。

table#id-form td 

102の重みを持っています（table#idは101とtdです1）、こ​​の一方：あなたはあなたの第二に変更した場合

#particular-td 

は100の重みを持っていますこれは：

#id-form #particular-td 

あなたは前のセレクタよりも優先される200の重み付けを得るでしょう。最後の手段としてのみ、!importantを使用する必要があります。これは、これでかなり下書きされることを防ぎます。

Answer 2

このコードを試してみてください、私が追加した！あなたのCSSに重要なのは、このモードでは、これは特異としなければならない

#particular-td { 
border: 1px solid black; 
text-align: center; 
background-color: #DFDFDF; 
height: 30px; 
padding: 10px !important; 
} 

Answer 3

テーブル＃ID形式のTDのパディングをovverideすることができます。 table#id-form tdは#particular-tdより具体的です。より高い特異性を有する規則は、より低い特異性を有する規則より優先される。ここで

は、あなたはそれがどのように機能するかを理解することを始めるためにいくつかのリソースです：！使用について

• Smashing Magazine article
• W3C spec on specificity
• Specificity calculator

重要な、他の人によって示唆されているように：

一つは、これを整理して!importantキーワードを使用するように誘惑されるかもしれないが、それはめったに良いアイデアではありません：

1. トラブルシューティング/
2. それはCSS
の通常の流れを中断を維持するために、痛みになり
3. ルールが後で

に他のルールによって上書きすることはできませんそれは特異性にまで読むために数分かかることがありますが、それはあなたがそれの把握を持っている時に費やす時間も価値があるだろう。

Answer 4

あなたは2つの方法があります。重要な特定の-TDのためのあなたのパディング後：

padding: 10px !important; 

ORは、あなたのセレクタはそうのように変更された：

table#id-form td#particular-td { 
border: 1px solid black; 
text-align: center; 
background-color: #DFDFDF; 
height: 30px; 
padding: 10px; 
} 

の両方が細かいです。私がそれを避けることができれば個人的に私は！の使用が好きではありません。