为单个表格单元格设置样式答案

【问题标题】：Styling a single table cell为单个表格单元格设置样式
【发布时间】：2011-10-22 11:46:06
【问题描述】：

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

<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），它们会改变每一行（棋盘样式）。该表还有一个带有额外第三种颜色的“本月风味”行。最后，表格有一个 td class="op" 将是第四种颜色。

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

我试过了：

#bltable tr.row1

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

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

#bltable td.op td {}

鉴于 td.op 应该照顾那部分..原则上不应该只是

.op {}

够了吗？

有什么想法吗？

【问题讨论】：

标签： css html-table row cell background-color

【解决方案1】：

你需要在你的css中改变这一行

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

到这里

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

您有两个 tds 和第一个 .op。

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

【讨论】：

非常感谢。解决了我的问题
我很高兴@techii。如果这回答了您的问题，您可以点击复选标记让其他人知道。

【解决方案2】：

你的规则是错误的。应该是：

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

或

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

【讨论】：

感谢您的帮助。非常感谢。

【解决方案3】：

你必须使用这个：

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

你说得对，额外的“td”不是必需的。

【讨论】：

【解决方案4】：

您的<td class="op"> 需要使用#bltable td.op {background-color:#f2f2c3;} 而不是#bltable td.op td {background-color:#f2f2c3;} 进行样式化

http://jsfiddle.net/AlienWebguy/QvdsQ/

【讨论】：

【解决方案5】：

#bltable td.op td 会选择任何TDs 下面 td.op，所以这不是您要查找的选择器。

基本上，您遇到了specificity problem：您的 row1 和 row2 选择器在其选择器中多了一个 HTML 元素，因此与您的 td.op 选择器相比，它们更加具体和“获胜”；您需要使您的 td.op 选择器比其他选择器更具体（或更具体），以便应用：

#bltable tr.row1 td {background-color:#eff3f7;}
#bltable tr.row2 td {background-color:#ffffff;}
#bltable tr.fotm td {background-color:#ffffd9;}
#bltable tr td.op {background-color:#f2f2c3;}

在上面，您有一个 ID、一个带有类的元素以及每个选择器的一个元素。那应该为你做。

【讨论】：

【解决方案6】：

将你的类标签更改为 id 标签，然后在它下面使用一些 javascript 来为它着色：

<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 id="op">sup</td>
    <td>sup</td>
</tr>
<tr class="fotm">
    <td>sup</td>
    <td>sup</td>
    <td>sup</td>
    <td>sup</td>
</tr>
</table>

<script>
     document.getElementById("op").style.background = "#f2f2c3";
</script>

【讨论】：

【解决方案7】：

td.op 后面的 td 是错误的，因为没有嵌套的 TD。我会改为在 td.op 之后添加 !important，应该这样做。

（我是用智能手机写的，所以无法测试，抱歉）

【讨论】：

除非必要，否则我会避免!important，在这种情况下不是。