css - 强制 TR CSS 超过 TD

Question

我理解根据定义，TD 的 CSS 定义会覆盖 TR 的 CSS。有没有办法做到这一点？

我的情况如下。我有一排信息。在一个特定的列中，文本为绿色。但是，我想“锁定”一行，不管怎样，整行都是灰色的。有没有办法做到这一点？

我正在尝试通过 !important 来实现这一点，但它不起作用。

示例代码：

CSS

.locked {
    color: #6D6D6D !important;
}
.count {
    color: #08C420;
}

HTML

<tr class="unlocked">
    <td class="count">10,000</td>
    <td></td>
    <td></td>
</tr>
<tr class="locked">
<td class="count">20,000</td>
    <td></td>
    <td></td>
</tr>

现在，所有具有类计数的单元格都显示为绿色。我该如何解决？

Answer 1

等级制？

.locked > .count {
    color: #6D6D6D;
}
.unlocked > .count {
    color: #08C420;
}

见 jsfiddle