Cssは継承された値をオーバーライドしません

Question

私は、 （div A内の複数のdiv）のようなものを含むHTMLを持っています。

<div class="a"> 
    <div class="b"></div> 
</div> 

私のCSSは以下のようになります。何らかの理由でBの値について

.a div { 
    border: solid; 
    border-width: thin; 
} 

.b { 
    border: none; 
    border-width: 0px; 
    border-collapse: collapse; 
} 

が上書きされることはありません。 しかし、 "a .div"ではなく "a"だけを書くと、内部の他のdivの動作を期待できません。

これを動作させる唯一の方法は、「重要」を使用することです。 （つまり、 "border：none！important";）しかし、これはエレガントではないようです。

が...そこに何が起こっているかのよう

エフードを任意のアイデアが大好きです。

Answer 1

.a divは、.bより高い特異性を有する。
.bのCSSが.aのものを上書きするようにするには、さらに高い特異性を与えます（例：.a div.b）。

（それとも、はい、!importantを使用することができますが、それはここで推奨されていません。）

Answer 2

セレクタが間違っています。

代わりの

a. div { 

書き込み

div.a { 

（ "A" のクラスを持つdiv要素を選択）

代わりの

b { 

（実際にはなりますすべてのスタイルを試してくださいのB要素）

使用

.b { 

（ "B" のクラスによって定義されているものを選択すると言うもの）

EDIT（応答に応じて）

divの内部にあるすべてのdivを "a"のクラスで選択するには、次のセレクタを使用します。 -

div.a div 

Answer 3

特異性はスコアCSSコンパイラによって計算され、宣言の中での最高スコアがコンテンツを変更するために取得します。特異性のそれぞれのタイプはdoesnの場合> 0 - 特異性のそれぞれのタイプはコード
（$）に存在する場合> 1 -

inline id-element class-element no.-of-elements 
    $   $    $    $ 

（$）：

スコアは、一般的にこの順序によって計算されます「Tは0011
明らかに最初のものになります.bスコアのために0012
になりますので、ここでのコード
.a divスコアのため

に存在します勝ったので、それを上書きするためにもかかわらず.b試行内容を変更するために取得します.a div

（OR）

あなたは（コードで）