Force TR CSS over TD

Question

Я понимаю, что по определению определение CSS TD переопределяет CSS CSS. Есть ли способ сделать это иначе?

Моя ситуация следующая. У меня есть строки информации. В одном конкретном столбце текст находится в зеленом цвете. Тем не менее, я хочу «заблокировать» строку, вся строка будет серой независимо. Есть ли способ сделать это?

Я пытаюсь достичь этого через! Важно, но не работает.

Пример кода:

CSS

.locked { 
    color: #6D6D6D !important; 
} 
.count { 
    color: #08C420; 
} 

HTML

<tr class="unlocked"> 
    <td class="count">10,000</td> 
    <td></td> 
    <td></td> 
</tr> 
<tr class="locked"> 
<td class="count">20,000</td> 
    <td></td> 
    <td></td> 
</tr> 

Прямо сейчас, все клетки с кол-класса показывают зеленый. Как это исправить?

Answer 1

Иерархия?

.locked > .count { 
    color: #6D6D6D; 
} 
.unlocked > .count { 
    color: #08C420; 
} 

see jsfiddle