CSS does not override inherited values

Question

I have an Html that contains something like: (Multiple divs in div A).

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

My css looks like this:

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

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

For some reason, the values ​​of b will not override a. however, if I simply write instead of “.div”, I will not get the behavior expected for other divs inside.

The only way I got this is to use "important!". (i.e. "border: none! important";), but that seems less elegant.

will love any ideas as to what is going on there.

Ehuda.

Answer 1

.a div , .b.
, css .b .a , , .a div.b.

( !important, , .)

Answer 2

.

a. div {

div.a {

( div "a" )

b {

( b)

.b {

( , -, "b" )

EDIT ( )

div, div "a", : -

div.a div 

Answer 3

CSS, .

:

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

($) → 1 if the corresponding type exists in the code
($) → 0 if the corresponding type of specificity does not exist in the code

So, here the .a divscore will be 0012
for the .bscore will be 0011
Obviously, the first wins, so he gets the opportunity to change the content, even if he .btries to override .a div

(OR)

you can use !importantin the ad to complete this declaration