CSS inheritance 不工作

Question

Screenshot 1

Screenshot 2

I am currently stuck on a css issue. Basically I have defined a style rule like this:

#divMyList tbody tr td{
    cursor:pointer;
    border-right:5px solid white;
    padding:10px;
    width:200px;
}

I'm applying another class named tmenu on my td in the <div> like this:

<td class="tmenu"> foo </td>

so that it inherits all the color and other combinations from along with my overridden styles in #divMyList tbody tr td I mentioned above. This is working fine for me.

Now, I want to implement the selected style of tmenu to my current <td> element so that when someone clicks on it, it inherits the selected style of tmenu class. The tmenu and its selected styles are defined like this:

.tmenu {
    width: 100%;
    height: 40px;
    font-size: 14px;
    font-weight: normal;
}

.tmenu ul li {
    /* ..... */
}

.tmenu ul li.selected {
    cursor: default;
}

When I do like this:

<td class="tmenu selected">foo</td>

it doesn't apply the rules of the selected class to my td element. Any help on what I'm doing wrong. Do I need another rule mixing all of these in a new class?

Answer 1

.tmenu ul li.selected { [...] }

Is going to look for an element structured like this:

<elem class="tmenu">
  <ul>
    <li class="selected"> </li>  <!-- This is going to get styled! -->
  </ul>
</elem>

It sounds like what you are looking for is this:

.tmenu.selected { [...] } 

Keep in mind something needs to apply the selected class to tmenu, and that it won't automatically happen by simply clicking on it.

Answer 2

the way you have defined your table, your css should look like this

#divMyList tbody tr td{
    cursor:pointer;
    border-right:5px solid white;
    padding:10px;
    width:200px;
}

.topmenu {
    width: 100%;
    height: 40px;
    font-size: 14px;
    font-weight: normal;
}

.topmenu td.selected{
    cursor: default!important;
}

I have put together a fiddle and added a color to show that it is getting styled

Answer 3

If you are using ASP.Net Forms application try document.getElementById('MainContent_test').innerHTML = carName;

If you do an 'Inspect' when you run the application you will see that ASP.Net renders the control with 'MainContent_[your control ID]' as the ID.

Once you get the name right it works.