Question

我无法弄清楚为什么会发生以下情况。（我可以 - 并且以一种无关的方式解决了这个问题。）

概要

我有一个表格，其中行具有交替的样式。好。
我想添加一种颜色来显示“正在进行中”和“已完成”。
问题：交替行颜色的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

您的HTML与CSS规则不符。您想要td或tr上的bg颜色吗？如果您将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;}

Answer 2

如何简化你的偶数/奇数CSS

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

这是一个类似的fiddle

Answer 3

...如果您无法共享任何代码，那么我们无法确定解决方案，但您可以使用＆＃39;＆gt;＆＃39尝试各种类别之间的直接指定;符号

但为什么不在课堂上使用！重要而且完成它？

表的CSS特异性问题

3 个答案: