Фоновый цвет CSS не применяется ко всем ячейкам с классом

Question

У меня есть таблица с цветом фона, применяемая к каждой другой строке для удобного просмотра с использованием псевдокласса :nth-child, но использует дополнительный класс для выделения определенной информации, применяя другой цвет фона для этой ячейки.

Сложная часть состоит в том, что для четных строк (где исходный стиль background-color: none;) применяется цвет подсветки, но нечетные строки (где стиль background-color: #C4A66F;) не применяют новый выделенный стиль.

Изображение

Как вы можете видеть, подсвечивание спорадическим. Он должен применяться к ячейкам столбцов «Inns», когда значение равно или больше 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.)