CSSのid要素が子の定義を上書きしています

Question

#top a { 
    color: #C6D6CA; 
    margin: 0 25px; 
    text-decoration: none; 
} 

.mainlink a { 
    display: block; 
    height: 100%; 
    width: 100%; 
    margin: 0; 
} 

.mainlink divは#topのどこかにあります。なぜ、マイングの#top（ペアレンタル）定義が、.mainlinkに設定されたものを上書きするのでしょうか？どのようにその行動を変更するには？

Answer 1

あなたのルールを変更することにより、それを修正することができます：

#top a {} 
#top .mainlink a {} 

Answer 2

これはセレクタ指定と呼ばれます。参照：http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Answer 3

CSSは "カスケード"なので、要素の子のいずれにも適用されます。子の色を指定し、プロパティ宣言の最後に "！important"を追加する必要があります。

Answer 4

スタイルシートがカスケードされている場合、名前付きIDの方がクラスよりも優先順位が高くなります。

http://www.w3.org/TR/CSS2/cascade.html

あなたはオーバーライドを強制的にmargin: 0 !importantを使用することができます。

Answer 5

#top aセレクタは.mainlink aより多くspecificityです。 IDセレクター大幅にセレクターの特異性を高めます。

各IDは、各クラスがケースである、Iのいずれかだろうと10.

の因子によって特異増加100倍セレクタの特異性を増加させる：

A.を交換しますクラスを持つID または
B.第2のセレクタにIDを追加します。