CSS背景颜色不应用于所有类的单元格 [英] CSS background-color not applied to all cells with class

问题描述

我有一个表有一个背景颜色应用每隔一行为容易查看使用：nth-​​child 伪类，但使用一个额外的类

I've got a table that has a background colour applied every other row for easy view using the :nth-child pseudo-class, but uses an additional class to highlight certain information by applying a different background colour to that cell.

混乱部分是偶数行（其中原始样式为 background-颜色：无; ）应用高亮颜色，但奇数行（样式为 background-color：＃C4A66F; ）应用新的突出显示风格。

The confusing part is that for even rows (where the original style is background-color: none;) the highlight colour is applied, but odd rows (where the style is background-color: #C4A66F;) don't apply the new highlighted style.

图片

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

As you can see, the highlighting is sporadic. It should be applied to the 'Inns' column cells when the value is equal to or more than 15. The class (tqual) appears in the html as expected.

HTML

下面的html在每一行的一个循环内， c $ c> tqual 类正确添加到值为> = 15的单元格。

The html below is within a loop over each row, so the tqual class is added correctly to cells with where the value is >= 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;
}

任何想法？感谢。

推荐答案

您的TD在甚至 TR 没有 background-color 设置 - 因为 none 不是该属性的有效值，因此该无效声明只会忽略 。 （如果您要在已经有另一个规则的元素上覆盖背景颜色，则必须使用默认值 transparent getno background color。）

Your TD in the even TR do not have any background-color set – since none is not a valid value for that property, so that invalid declaration simply gets ignored. (If you want to override the background color on an element that already has one from another rule, then you have to use the default value transparent to get "no background color".)

因此，使用选择器 td.tqual 的规则能够设置这些TD的背景颜色 - 但不是 odd TR中的那些颜色，因为 td.tqual 特异性低于 tr.tdata：nth-​​child（odd）td 。

Therefore, the rule with the selector td.tqual is able to set a background color for those TD – but not for those in the odd TR, because td.tqual is a selector with lower specificity than tr.tdata:nth-child(odd) td.

> background-color 添加到有效值，fe red

(Change background-color in your first rule to a valid value, f.e. red – and you will see that none of your TD with class tqual will get the yellow background applied any more.)

这篇关于CSS背景颜色不应用于所有类的单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！