How to override inherited styles? is the only way to redefine all styled elements?

Say I have my CSS like this:

div.some-class table

So I have:

<div class="some-class">

<table ...>
..
</table>
</div>

Now if I need to have a child div inside the table, the c开发者_如何学Gohild seems to inherit from the parent style, and I want this to be styled differently.

 <div class="some-class">

    <table ...>


    <div> <table .. > ... </table> .. </div>


    </table>
    </div>

how do I do this? do I have to be explicit and do this:

div.some-class table div.other-class table

Any other way?

You can just do .other-class{...} if you're trying to style the div itself, or .other-class table {...} if you want to style the table.

You should always be explicit. It makes things easier to understand:

div.some-class table                           { /* styles */}
    div.some-class table div.other-class table { /* child-styles */}

Either that or use an #id somewhere.

You could

• give the first table a specific class name and have all rules point to that class (this is the easiest solution but the least nice in terms of clean CSS)

• Use the child selector div.some-class > table to create rules that address only the first table and not the second one (doesn't work in IE6)