4

这是我的 CSS 样式表的一部分：

table tr td {
    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-collapse: collapse;
    overflow: wrap;
    background-color: #CCFFFF;
    text-align: center;
}
table {
    width: 75%;
}
tr {
    maximum-width: 200px;
}
tr.RedThreshold {
    background-color: red;
}
tr.YellowThreshold {
    background-color: yellow !important;
    font-weight: bold;
}

YellowThreshold它在我的 HTML 中设置了这个元素的样式：

<tr class="YellowThreshold">
    <td>vrd70</td>
    <td>29</td>
    <td>0x127c</td>
    <td>4.86</td>
    <td>4.54</td>
    <td>6.06</td>
</tr>

最终结果从 中选择了粗体YellowThreshold，但没有选择黄色背景颜色。Color我已经用 just和 with试过了Background-Color，但没有改变。有一些我没有解决的优先问题。有什么建议么？

4

2 回答 2

6

它实际上不是一个特异性问题 - 它与背景颜色的绘画顺序有关。

摘自附录 E（堆叠上下文的详细描述），CSS 2.1 规范：

否则，如果元素是 a <table>：

  1. 表格背景（颜色然后图像）。
  2. 列组背景（颜色然后图像）。
  3. 列背景（颜色然后图像）。
  4. 行组背景（颜色然后图像）。
  5. 行背景（颜色然后图像）。
  6. 单元格背景（颜色然后图像）。
  7. 所有表格边框（按分隔边框的树顺序）。

<td>背景只是简单地绘制在 <tr>背景上 - 除非您创建堆叠上下文并使用z-index- http://jsfiddle.net/VBGMP/更改任一元素位置

于 2013-06-14T19:14:38.640 回答
3

background-color应用于表格行，但选择器td中的显式目标table tr td优先。

改变：

tr.RedThreshold {
    background-color: red;
}
tr.YellowThreshold {
    background-color: yellow !important;
        font-weight:bold;
}

到：

tr.RedThreshold td {
    background-color: red;
}
tr.YellowThreshold td {
    background-color: yellow !important;
        font-weight:bold;
}

@adrift正确引用了 CSS 2.1 规范和堆叠上下文作为 OP 问题的根本原因。

于 2013-06-14T19:01:55.880 回答