Почему фоновый цвет: ни один не переопределяет заданный цвет фона?

Question

Моя цель состоит в том, чтобы все ячейки в таблице имели цвет фона, кроме тех, у которых был класс «прозрачный». Вот некоторые примеры кода (corresponding jsfiddle):

<style> 
    td { background-color: red } 
    td.transparent { background-color: none } 
</style> 

<table> 
    <tr> 
     <td>foo</td> 
     <td class="transparent">bar</td> 
    </tr> 
</table> 

Почему td.transparent клетка не следовать правилу td.transparent CSS? Когда я проверяю элемент, это правило существует, но оно переопределяется правилом td, которое, похоже, нарушает нормальные правила специфики css.

Я могу получить то, что хочу, используя rgba(0,0,0,0) вместо none, но rgba не поддерживается в IE8, и я хотел бы избежать использования уродливого взлома, если бы мог.

Я также хотел бы просто понять, почему это не работает так, как я ожидал.

Мысли?

Answer 1

Значение должно быть допустимого цвета, а none - не допустимый цвет. Вместо этого вы можете использовать transparent (аналогично rgba(0,0,0,0), но более широко поддерживается). Если это нехорошо, вы всегда можете пойти с white или использовать более конкретное правило для фона red.

Answer 2

Правильный синтаксис (для CSS2.1) является:

background-color:transparent; 

http://www.w3.org/TR/CSS2/colors.html#propdef-background-color

Answer 3

Нет не является допустимым цветом, вместо этого использовать transparent.

jsFiddle demo

td.transparent { 
    background-color: transparent; 
} 

В качестве альтернативы, вы можете также использовать следующие:

Причина это работает, потому что она о том, что не должно быть никакого фона вообще. Это не относится к определенному цвету, как в первом примере.

td.transparent { 
    background: none; 
} 

jsFiddle using this method.

---

В качестве побочного примечания использование цветов CSS3 (rgba) не поддерживается на 100%. Ссылка здесь: http://caniuse.com/css3-colors

---

Кроме того, я хотел бы сказать, что все это можно было бы избежать, если не установить щёток background-color в первую очередь. Тогда не было бы причин перезаписывать оригинальный стиль, если бы это было так.

Answer 4

Для чего это стоит: вы можете заменить background-color:none на background: none, и он будет работать.