CSS background-color未应用于具有类的所有单元格

Question

我有一个表，每隔一行应用一个背景颜色，以便使用:nth-child伪类轻松查看，但使用另一个类通过应用不同的背景颜色突出显示某些信息那个细胞。

令人困惑的部分是，对于偶数行（原始样式为background-color: none;），应用高亮颜色，但奇数行（样式为background-color: #C4A66F;）不适用于新突出的风格。

图片

正如您所看到的，突出显示是零星的。它应该适用于＆＃39; Inns＆＃39;当值等于或大于15时，列单元格。类（tqual）按预期显示在html中。

HTML

下面的html位于每行的循环内，因此tqual类正确添加到值为＆gt; = 15的单元格中。

<tr class="tdata">
     <td class="col-name"><?php echo $name; ?></td>
     <td class="col-apps"><?php echo $apps; ?></td>
     <td class="<?php if($inns>=15) echo "tqual ";?>col-inns"><?php echo $inns; ?></td>
     [...]
</tr>

CSS

tr.tdata:nth-child(even) td {
    background-color: none;
}

tr.tdata:nth-child(odd) td {
    background-color: #C4A66F;
}

td.tqual {
    background-color: #DDDD00;
}

有什么想法吗？感谢。

Answer 1

even TR 中的您的TD没有任何background-color集 - 因为none不是该属性的有效值，因此无效声明只是忽略。 （如果您希望覆盖已经有另一个规则的元素的背景颜色，那么您必须使用默认值transparent来获得“无背景颜色”。）< / p>

因此，选择器td.tqual的规则可以为这些TD设置背景颜色 - 但不能为odd TR中的那些设置，因为td.tqual是一个较低的选择器特异性高于tr.tdata:nth-child(odd) td。

（将您的第一条规则中的background-color更改为有效值，fe red - 您将看到您的道明的 none class tqual将再次应用黄色背景。）

因此解决方案很简单：使用至少具有相同特异性的规则为这些.tqual单元格提供背景颜色。 （并修正错误的background-color值none。）