CSS继承不起作用

Question

屏幕截图1

屏幕截图2

我目前陷入了CSS问题。基本上我已经定义了这样的样式规则：

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

我在tmenu的{​​{1}}上应用另一个名为td的课程，如下所示：

<div>

所以它继承了我在上面提到的<td class="tmenu"> foo </td> 中的被覆盖样式的所有颜色和其他组合。这对我来说很好。

现在，我想将选定的#divMyList tbody tr td样式实现到我当前的tmenu元素，这样当有人点击它时，它会继承所选的<td>类样式。 tmenu及其选定的样式定义如下：

tmenu

当我这样做时：

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

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

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

它不会将所选类的规则应用于我的td元素。对我做错的任何帮助。我是否需要在新课程中混合所有这些的另一条规则？

Answer 1

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

将寻找一个这样结构的元素：

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

听起来你正在寻找的是：

.tmenu.selected { [...] } 

请记住，需要将selected类应用于tmenu，并且只需单击它就不会自动发生。

Answer 2

你定义你的表的方式，你的CSS应该是这样的

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

我已经整理了一个fiddle并添加了一种颜色来表明它正在被设计样式