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;
}