样式化单个表格单元格

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>

如您所见,该表有两种主要颜色(row1和row2),用于更改每一行(checkboard样式).该表还有一个"月份的味道"行,另外还有第三种颜色.最后,该表有一个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;}

你有两个tds和.op第一个.

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