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

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>​

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

演示：

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

---

谢谢

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

在CSS2.1或CSS3中，除非您添加了约束条件，否则您的特定需求是不可设置的。
举例来说，如果您知道可能会遇到多少未设置样式的行，那么我下面的twit中的两个提琴就可以解决这个问题：这是来自地狱的CSS，千万不要在生产中这样做！如前所述，jQuery/Sizzle及其伪

：visible

将远远优于jQuery/Sizzle。或者更好的做法是，在要设置样式的每一行中添加一个类服务器端

其他人对你的例子嗤之以鼻：
您可以看到它一直工作到第二个未设置样式的行旁边的行。下面的其余行前面都是奇数未设置样式的行和偶数未设置样式的行；应用的规则将是最后声明的规则。AFAIK无法以有意义的方式应用其中一种。如果向第一个选择器添加权重，它将始终应用。如果你不这样做，最后一个总是适用的

如果您知道在出现另一个未设置样式的行或表格末尾之前，有多少行可以跟在未设置样式的行后面，那么这里有另一个提琴：

---

此特定示例适用于一行中不超过4行但不超过6行的情况。您可以使用6使其工作，但如果使用7则会失败，等等

我使用虚拟线解决了这个问题：

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>​

演示

---

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

经常有人问我这个问题。您可以组合伪类，但它们的工作方式与您期望的不同。BoltClock:很显然，它们不是。您的

：n子级

不是

：not

=>的一部分，它将选择偶数元素，而键3是奇数，如xFortyFourx所述

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