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;
}

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

<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

它实际上不是specificity问题 - 而是与背景颜色的绘画顺序有关。

取自Appendix E (Elaborate description of Stacking Contexts), CSS 2.1 Spec：

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

表背景（颜色然后是图像）。
列组背景（颜色，然后是图像）。
列背景（颜色然后是图像）。
行组背景（颜色然后是图像）。
行背景（颜色然后是图像）。
单元格背景（颜色然后是图像）。
所有表格边框（按树状顺序分隔边框）。

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

Answer 2

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问题的根本原因。

风格没有被覆盖

2 个答案: