CSS apply style for HTML elements on a CSS ROLE

I have an element in my HTML <div class="TreeView"></div> I would like apply style to ta开发者_如何学Pythongs: td, div, table for a specific Class Role: TreeView

At the moment this my code does not work.

td.TreeView,  div.TreeView, table.TreeView
{
    height: 20px !important;
    border-collapse: collapse;
    border-spacing: 0px;
    margin: 0px;
    padding: 0px;
}

The only way I'm able to make it work is: apply an ID to my div <div id="MainContent_uxTreeView" class="TreeView"></div> and use this css code instead:

    #MainContent_uxTreeView table, #MainContent_uxTreeView td, #MainContent_uxTreeView div
    {
        height: 20px !important;
        border-collapse: collapse;
        border-spacing: 0px;
        margin: 0px;
        padding: 0px;
    }

I would like not to use the second version mentioning the ID.. so what I'm doing wrong here?

Thanks guys for your help!

It seems that you need to apply CSS rules for descendants of .TreeView:

.TreeView td,  .TreeView div, .TreeView table
{
    height: 20px !important;
    border-collapse: collapse;
    border-spacing: 0px;
    margin: 0px;
    padding: 0px;
}

The selector into two css fragment you posted are slight different

.TreeView td,  .TreeView div, TreeView table
{
    height: 20px !important;
    border-collapse: collapse;
    border-spacing: 0px;
    margin: 0px;
    padding: 0px;
}

is similar to the second one, you should try it (maybe using firebug or similar tools to check if the rules are somewhat overriden)

learn some priority of ID and class and try this now

body td.TreeView,  body div.TreeView, body table.TreeView
{
    height: 20px !important;
    border-collapse: collapse;
    border-spacing: 0px;
    margin: 0px;
    padding: 0px;
}