CSS - определение приоритетов css-правил

У меня есть таблица проектов с нечетной и четной раскраской строк для лучшего обзора:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

У меня также есть код, который проверяет, опаздывает ли проект, и если я так окрашу всю строку проекта в красный цвет (вместо обычной раскраски четных и нечетных строк)

Кроме того, каждая строка имеет класс, а имя класса зависит от того, запущен проект или нет. Классы:

.redBackground {background-color:#CD5C5C;}
.yellowBackground {background-color:#FFFF00;}
.noBackground {}

Проблема в том, что независимо от того, какой класс имеет строка, css четных строк всегда "выигрывает", поэтому я никогда не вижу красный или желтый фон. Как я заставляю его работать, поэтому в случае поздней даты он покажет красные и желтые классы, и в обычном случае это будет странно или даже?

4 ответа

Используйте селектор с более высокой специфичностью, например

table tr.redBackground {background-color:#CD5C5C;}


Почему бы не сделать что-то подобное в java-скрипте. Предполагая, что вы знаете, какие строки предназначены для последующего проекта.

if( project is late ){ document.getElementById("MyElement").className = "redBackground";
}

Держите класс по умолчанию нечетным и четным, а в случае позднего изменения проекта класс. Предполагая, что вы не против изменения программного класса.


Вы можете использовать родительский селектор, для вашего случая это должно работать:

tr.redBackground {background-color:#CD5C5C;}
tr.yellowBackground {background-color:#FFFF00;}

Или,

#parent_div .redBackground {background-color:#CD5C5C;}
#parent_div .yellowBackground {background-color:#FFFF00;}


Попробуйте использовать !important

.redBackground {background-color:#CD5C5C !important;}
.yellowBackground {background-color:#FFFF00 !important;}

licensed under cc by-sa 3.0 with attribution.