CSS背景颜色不适用于所有带有类的单元格

我有一张表格，每隔一行应用一个背景颜色，以便使用:nth-child伪类轻松查看，但使用其他类通过应用来突出显示某些信息与该单元格不同的背景颜色。CSS背景颜色不适用于所有带有类的单元格

令人困惑的是，对于偶数行（原始样式为background-color: none;）应用了高亮颜色，但奇数行（样式为background-color: #C4A66F;）未应用新的高亮样式。

图片

Image of problem

正如你所看到的，高亮是零星的。当值等于或大于15时，它应该应用于'Inns'列单元格。类（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; 
}

任何想法？谢谢。

来源

2014-08-31 worldofjr

请仔细阅读_selector specificity_。 – CBroe 2014-08-31 00:28:12

是的，但问题是它覆盖了一个伪类，而不是另一个。 – worldofjr 2014-08-31 00:29:26

你在even TR TD没有任何一套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。）

来源

2014-08-31 00:42:36 CBroe

啊我明白了。 'tr.tdata td.tqual'修复了一些问题。出于兴趣，我使用'background：none;'替换了一个普通的基于类的系统。我是否正确地说我有效地将'background-image'设置为'none'，并且应用了'background-color'的默认值（我认为它是“透明的”）。 – worldofjr 2014-08-31 00:59:22

是的，这是正确的。 – CBroe 2014-08-31 01:02:55

CSS背景颜色不适用于所有带有类的单元格

回答

相关问题