CSS背景色不适用于带班的所有单元格(CSS background-color not applie

我有一个具有背景色表应用于每隔一行使用易观:nth-child伪类，而是使用一个额外的类应用不同的背景颜色给该小区来突出某些信息。

令人困惑的部分是，偶数行（其中原始风格background-color: none; ）高亮颜色被应用，但奇数行（这里的款式是background-color: #C4A66F;不适用的新的高亮样式。

图片

正如你所看到的，突出显示是零星的。 应当施加到“旅馆”列的单元时的值等于或大于15。类（ tqual ）如预期出现在HTML。

HTML

下面的HTML是一种遍历每行内，所以tqual类被正确地加入到细胞中与其中值是> = 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:

您在TD even TR 没有任何background-color设置-因为none是不是该属性的有效值，使无效的声明只是被忽略 。 （如果你想覆盖已有一个来自另一个规则元素的背景颜色，那么你必须使用默认值transparent拿到“无背景色”。）

因此，与选择的规则td.tqual能够设置为这些TD背景颜色-但不是为那些在odd TR，因为td.tqual是特异性较低，不是选择tr.tdata:nth-child(odd) td 。

（更改background-color在您的第一条规则到一个有效的值，铁red -你会发现你没有与TD类的tqual将得到的黄色背景适用了。）

因此，解决办法很简单：用一个规则至少有相同的特异性给一个背景色为那些.tqual细胞。 （和修复错误的background-color值none 。）

文章来源: CSS background-color not applied to all cells with class