风格没有被覆盖

Question

这是我的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,用Background-Color的,但没有任何变化.有一些优先问题,我没有过去.有什么建议？

Answer 1

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

摘自附录E(堆叠上下文的详细说明),CSS 2.1规范:

否则,如果元素是<table>:

1. 表背景(颜色然后图像).
2. 列组背景(颜色然后图像).
3. 列背景(颜色然后图像).
4. 行组背景(颜色然后图像).
5. 行背景(颜色然后图像).
6. 细胞背景(颜色然后图像).
7. 所有表格边框(按树状顺序分隔边框).

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