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来获得我想要的内容，但IE8中不支持rgba，如果可以的话，我想避免使用丑陋的黑客。

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

思想？

Answer 1

值必须是有效颜色，none不是有效颜色。相反，您可以使用transparent（类似于rgba(0,0,0,0)但更广泛支持）。如果这不好，您可以随时使用white或使用针对red背景的更具体的规则。

Answer 2

对于它的价值：您可以将background-color:none替换为background: none，它会起作用。

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

正确的语法（对于CSS2.1）是：

background-color:transparent;

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

Answer 5

另一种选择是将属性重置为父元素（val navDestination = navctrl.graph.find { target -> preference.fragment.endsWith(target.label?:"") }）的值，或将浏览器为属性设置的默认值（inherit）

在我需要覆盖背景色的特定情况下，initial是解决此问题的原因。

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

5 个答案: