css - 设置单个表格单元格的样式

Question

我在设置单个表格单元格的样式时遇到问题。这是说明我的问题的示例代码:

<style>
#bltable { border-collapse:collapse; width:575px;
    -moz-user-select:none;}
#bltable tr.row1 {background-color:#eff3f7;}
#bltable tr.row2 {background-color:#ffffff;}
#bltable tr.fotm td {background-color:#ffffd9;}
#bltable td.op td {background-color:#f2f2c3;}
</style>
<table id="bloodlines">
    <tr class="row1">
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
        <tr class="row2">
        <td>sup</td>
        <td>sup</td>
        <td class="op">sup</td>
        <td>sup</td>
    </tr>
    <tr class="fotm">
        <td>sup</td>
        <td>sup</td>
        <td>sup</td>
        <td>sup</td>
    </tr>
</table>

正如您所看到的，表格有两种主要颜色(行 1 和行 2)，它们会改变每一行(棋盘样式)。 该表还有“本月 flavor ”行以及额外的第三种颜色。 最后，该表有一个 td class="op"，它将是第四种颜色。

我遇到的问题是 row1、row2 和 fotm 类覆盖了“op”类颜色，并且第四种颜色未显示。我可以以不同的方式编写它以使其工作吗？

我已经尝试过:

#bltable tr.row1 

(最后没有“td”)但是我根本没有得到行颜色，因为“X不是继承的。它应用于封闭标签”

此外，我不确定是否有必要在末尾添加额外的“td”

#bltable td.op td {}

考虑到 td.op 应该处理这部分..原则上不应该只是

.op {}

够了吗？

有什么想法吗？

Answer 1

您需要更改 css 中的这一行

#bltable td.op td {background-color:#f2f2c3;}

到此

#bltable tr td.op {background-color:#f2f2c3;}

您有两个 td，第一个是 .op。

示例:http://jsfiddle.net/jasongennaro/LdSM3/