在CSS中组合:not()选择器

Question

我正在尝试选择表格内所有的tr元素，但要排除第三和第四个。我通过以下方式实现了这一点：

#table tr:not(:nth-child(3)):not(:nth-child(4))

我希望能够将这些选择器结合起来，因为我还有一些其他的:nth-child选项。像这样做，但它没有起作用：

#table tr:not(:nth-child(3), :nth-child(4))

在jQuery中这个方法是有效的，但在CSS中却不行。我使用的是Chrome浏览器（只需要在那里运行即可）。

我一直没能找到一个适合这种情况的组合选择器。如何使用:not结合其他选择器？

- pimvdb

---

我已将您问题中关于jQuery的部分扩展为一个更通用和规范的帖子，您可以在这里找到： jQuery和CSS中:not()选择器的区别是什么？ - BoltClock

Answer 1

Selectors level 3中的:not()伪类只允许单个简单选择器。作为一个jQuery选择器，它可以工作，因为jQuery扩展了:not()功能以允许任何选择器（比如.not()方法）。

然而，你的第二种语法是Selectors 4中提出的一种:not()增强功能之一，并且与第一种语法等效。虽然示例（截至撰写本文时）显示了一系列:not()选择器，但该提案指出：

  

否定假类，:not（X），是接受选择器列表作为参数的函数符号表示。它代表一个不由其参数表示的元素。

这里，选择器列表只是一个逗号分隔的选择器列表。

如果需要否定包含组合符（如>、+、~、空格等）的选择器（例如div p），则无法在CSS中使用:not()，必须使用jQuery解决方案。

- BoltClock

---

谢谢，规范确实清楚地说明了CSS3和CSS4之间的差异。 - pimvdb

关于 :not 不支持组合器的注释对我很有帮助。谢谢！ - vhs

Answer 2

虽然标记的答案是正确的，但我想指出你也可以使用css实现你想要的效果，只是方法不同。而不是使用not，您可以选择那些不需要的元素并取消应用您不想要的样式。

#table tr {
    /* general case styling */
    color: blue;
}
#table tr:nth-child(3),
#table tr:nth-child(4) {
    color: black;
}

- OZZIE