0

HTML：

<table>
<tr class="not-counted"><th>Heading 1</th></tr>
<tr><td>key1</td><td>val1</td></tr>
<tr><td>key2</td><td>val2</td></tr>
<tr class="not-counted"><th>Heading 2</th></tr>
<tr><td>key3</td><td>val3</td></tr>
</table>​

CSS 样式：

table tr:not(.not-counted):nth-child(even) td {
    background-color: gray;
}​

演示：http: //jsfiddle.net/MartyIX/fdtpL/

我希望包含 key3 的 TR 也有灰色背景，但它不起作用。如何正确编写 CSS？

谢谢！

4

2 回答 2

2

您想在 CSS 中为带有斑马线的表格设置样式，其中未知数量的行未设置样式（或隐藏，相同的结果），这些未设置样式的行位于表中的任何位置。
要设置样式的每个剩余行前面是奇数位置的未知数量的无样式行和偶数位置的未知数量的无样式行，以任何顺序排列。

除非您添加约束，否则您的特殊需求在 CSS2.1 或 CSS3 中是不可设置的。例如，如果你知道你会遇到多少无样式的行，那么我下面的推特中的 2 个小提琴就可以解决问题： https
://twitter.com/#!/PhilippeVay/statuses/166243438436687873这是来自地狱的 CSS，不要永远不要在生产中这样做！简而言之，jQuery/Sizzle 和它的伪类要好得多。或者更好的是，为您想要设置样式的每一行添加一个类服务器端。:visible

您的示例的其他小提琴：http: //jsfiddle.net/yBKqy/
您可以看到它一直有效，直到您的第二个无样式行旁边的行。下面的其余行前面都有一个奇数无样式行和一个偶数无样式行；适用的规则将是最后宣布的规则。AFAIK 无法以有意义的方式应用一个或另一个。如果您向第一个选择器添加权重，它将始终适用。如果您不这样做，最后一个将始终适用。

如果您知道在有另一个无样式行或表格末尾之前有多少行可以跟随无样式行，这里是另一个小提琴：http: //jsfiddle.net/yBKqy/3/
这个特定示例适用于不超过 4 行一行，但不是 6。你可以让它与 6 一起工作，但它会在 7 时失败，等等

于 2012-05-06T11:31:55.513 回答
0

我在虚拟线的帮助下解决了这个问题：

HTML

<table>
<tr><th>Heading 1</th></tr>
<tr style="display:none;"><th></th></tr> <!-- dummy line -->
<tr><td>key1</td><td>val1</td></tr>
<tr><td>key2</td><td>val2</td></tr>
<tr><th>Heading 2</th></tr>
<tr style="display:none;"><th></th></tr> <!-- dummy line -->
<tr><td>key3</td><td>val3</td></tr>
</table>​

CSS

table tr:nth-child(even) td {
    background-color: gray;
}​

演示

http://jsfiddle.net/MartyIX/fdtpL/3/

我并不为此感到骄傲，但我已经为此浪费了太多时间。

于 2012-05-06T12:32:29.970 回答