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

【问题标题】：Can I combine pseudo-classes in CSS like this?我可以像这样在 CSS 中组合伪类吗？
【发布时间】：2012-05-06 20:32:29
【问题描述】：

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？

谢谢！

【问题讨论】：

这个问题经常被问到。您可以组合伪类，但它们不会按您期望的方式工作。
BoltClock：嗯，显然他们没有。
您的 :nth-child 不是 :not 的一部分 => 它会选择偶数元素，而 key3 是奇数，如 xFortyFourx 所述

标签： css css-selectors pseudo-class

【解决方案1】：

您想在 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 时失败，等等

【讨论】：

【解决方案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/

我并不为此感到自豪，但我为此浪费了太多时间。

【讨论】：