Question

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？

谢谢！

Answer 1

你想在CSS中设置一个表格，其中斑马行的行数未知，未设置样式（或隐藏，结果相同），这些没有样式的行位于表格中的任何位置。
待设置样式的每个剩余行前面都有奇数位置的未知样式行和未知样式的无格式行，位于偶数位置。

除非您添加约束，否则您的特殊需求在CSS2.1或CSS3中不具有样式例如，如果你知道你可以遇到多少没有样式的行，那么下面的twit中的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，等等

Answer 2

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

<强> 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/

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

我可以像这样在CSS中组合伪类吗？

2 个答案: