Проблема специфичности CSS со столами

Question

Я не могу понять, почему происходит следующее. (. Я могу - и решить эту проблему в несвязанной образом)

РЕЗЮМЕ:

1. У меня есть таблица, в которой ряды чередуются стили. Хорошо.
2. Я хотел добавить цвет для отображения «in progress» и «completed».
3. ПРОБЛЕМА: CSS для чередующихся цветов строк продолжает превзойти мой код для «в процессе» и «завершен».

более углубленные:

HTML-код таблицы:

<table class="tbl-invoice"> 
     <tr class="completed"> 
      <td>9/21/2014</td> 
      <td>PAID</td> 
      <td class="rep">Bill Bayer</td> 
     </tr> 

Все стили в одном файле.

CSS-за чередующихся цветов:

.tbl-invoice tr:nth-child(odd) td { background-color:#F0F8FF; } 

Его специфичность 0 0 2 2.

CSS-код для "завершен":

.completed { background-color:#e5ffe5; } 

выше стиль аннулируют его. Нет проблем. Так что я написал:

.tbl-invoice tr td .completed { background-color:#e5ffe5; } 

, который также имеет специфичность 0 0 2 2, но помещается ниже предыдущего примера, так это CSS должен превзойти другого.

Мало того, что это не козырь, но это не козырь его даже тогда, когда я добавил body:

body .tbl-invoice tr td .completed { background-color:#e5ffe5; } 

Answer 1

Как насчет упрощая четный/нечетный CSS

.tbl-invoice tr:nth-child(odd) {background-color:#F0F8FF; } 
.tbl-invoice .completed { background-color:#e5ffe5; } 

Вот подобный fiddle

Answer 2

... если вы не можете поделиться какой-либо код, то мы не можем быть уверены, решения, но вы можете попробовать прямую спецификацию среди классов, используя символ «>».

Но почему бы не использовать! Важно в вашем классе и быть с ним?

Answer 3

Ваш HTML-код не соответствует вашему правилу CSS. Вы хотите цвет bg на td или tr? Если вы держите свой HTML как:

<table class="tbl-invoice"> 
     <tr class="completed"><td>9/21/2014</td><td>PAID</td><td class="rep">Bill Bayer</td></tr> 

Тогда правило CSS должно быть:

.tbl-invoice tr.completed{background-color:#e5ffe5;}