用于选择交替元素组的CSS选择器

我有一个HTML表格，我想突出显示由3行组成的交替组，以便突出显示第0-3行、第4-6行、第7-9行等

到目前为止，我提出的最佳解决方案是：

tr:nth-child(6n + 1),
tr:nth-child(6n + 2),
tr:nth-child(6n + 3) {
   background-color:#eee;
}

---

是否可以将这些选择器压缩为单个选择器？

如果行的样式是这样的，因为它们之间存在关系，那么使用

元素对它们进行分组在这里是合适的，并且会减少选择器

t正文：第n个子项（奇数）{
背景：#CCC；
}
A.
B
C
A.
B
C
A.
B
C

是的，它可以在单个选择器中实现（但它是最好的吗？） 如果以十人一组的方式进行（正如你的评论所说，这是你的最终目标），那么与拥有十个单独的选择器相比，可能不值得这样做，因为单独的选择器可能会更清楚

三人一组（）

十人一组（）

---

这显然不能消除您希望避免的代码复制/粘贴问题，也不能确定它是否符合“压缩”条件。但是，它被简化为一个选择器。

如果这纯粹是一个示例，我真的不想手动键入所有这些选择器，您可以使用CSS预处理器为您生成它们

Sass：

输出：

td:nth-child(6n+1), td:nth-child(6n+2), td:nth-child(6n+3) {
  background: yellow;
}

td:nth-child(20n+1), td:nth-child(20n+2), td:nth-child(20n+3), td:nth-child(20n+4), td:nth-child(20n+5), td:nth-child(20n+6), td:nth-child(20n+7), td:nth-child(20n+8), td:nth-child(20n+9), td:nth-child(20n+10) {
  background: yellow;
}

还要吵架吗

td {
    @include fat-zebra(10) {
        background: yellow;
    }
}

输出：

td:nth-child(6n+1), td:nth-child(6n+2), td:nth-child(6n+3) {
  background: yellow;
}

td:nth-child(20n+1), td:nth-child(20n+2), td:nth-child(20n+3), td:nth-child(20n+4), td:nth-child(20n+5), td:nth-child(20n+6), td:nth-child(20n+7), td:nth-child(20n+8), td:nth-child(20n+9), td:nth-child(20n+10) {
  background: yellow;
}

---

+1问一个好问题，虽然说实话，我认为你现有的解决方案没有那么糟糕。当你一次只做3行的时候还不算太糟糕，但是10行（这就是我在网站上实际做的）开始看起来很难看。我的大脑看到了基本上是复制/粘贴的代码，并立即尖叫，“一定有更好的方法！”：）足够公平了。但是，如果我们讨论的是一次链接10行的表组，我首先要问的是，您得到的表结构在语义上是否正确。我还没有看到数据，所以我不能确切地说，但听起来可能有更好的方法来构造HTML。我同意你的评估，但是在这种情况下，行没有语义链接。突出显示只是一个视觉设计决策，我认为，它旨在使表格更易于视觉扫描。嗯，在这种情况下，我会回到我的第一条评论，并建议坚持使用现有的解决方案。这可能看起来很难看，但这是语义上最正确的答案。要么这样，要么恢复使用类名。对于您想要的内容，没有提供任何更简洁的内容，但是如果您想要，您可以在此处尝试一些想法：。

td {
    @include fat-zebra(10) {
        background: yellow;
    }
}

td:nth-child(20n+1), td:nth-child(20n+2), td:nth-child(20n+3), td:nth-child(20n+4), td:nth-child(20n+5), td:nth-child(20n+6), td:nth-child(20n+7), td:nth-child(20n+8), td:nth-child(20n+9), td:nth-child(20n+10) {
  background: yellow;
}