Как смешивать CSS классы для разных результатов

Question

У меня есть таблица, в которой четным строкам присваивается класс «четные», а нечетным - «нечетные».Но я также хочу дать классам строк, например "complete" или "problem", которые дают им другие цвета, но я все же хочу, чтобы оттенок цветов был темным или светлым, в зависимости от того, четны они или нечетны.

Примеры:

<table>
    <tr class="even problem">
    <tr class="odd complete">
    <tr class="even complete">
    <tr class="odd complete">
    <tr class="even incomplete">
    <tr class="odd complete">
</table>

Нужно ли создавать отдельные классы для каждой комбинации, или есть какой-то другой способ?

Answer 1

Вы можете создать полупрозрачный файл PNG с фоном для .complete и других классов, поэтому цвет фона классов even и odd все равно будет ниже.

.complete { background: transparent url("path/to/bg.png") top left repeat;}

Я не проверял, но могу работать.

Answer 2

Вы имеете в виду что-то подобное?

.even{
  background:#ccc;
}

.odd{
  background:#eee;
}

.even.problem{
   background:#900;
}

.odd.problem{
   background:#f00;
}

Answer 3

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

http://jsfiddle.net/ywhR2/