为什么background-color:none不会覆盖指定的背景颜色？

Question

我的目标是让表格中的所有单元格都具有背景颜色,但"透明"类除外.这是一些示例代码(对应的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,但IE8中不支持rgba,如果可以的话,我想避免使用丑陋的黑客.

我也想简单地理解为什么这不符合我的预期.

思考？

Answer 1

该值必须是有效颜色,并且none不是有效颜色.相反,你可以使用transparent(类似rgba(0,0,0,0)但更广泛支持).如果这不好,您可以随时使用white或使用更具体的red背景规则.

Answer 2

对于它的价值:你可以替换background-color:none它background: none,它会工作.

Answer 3

没有不是有效的颜色,而是使用transparent.

jsFiddle演示

td.transparent {
    background-color: transparent;
}

或者,您也可以使用以下内容:

这样做的原因是因为它说明一般不应该有背景.它不是指第一个例子中的特定颜色.

td.transparent {
    background: none;
}

jsFiddle使用这种方法.

另外,CSS3颜色(rgba)的使用不是100%支持.参考这里:http://caniuse.com/css3-colors

另外,我想说的是,如果你没有background-color首先设置初始值,所有这一切都可以避免.如果是这种情况,则没有理由覆盖原始样式.