Css 每两个表行的第n个子项

我需要使每两行我的表灰色，我宁愿使用第n个孩子，如果可能的话

我把它弄得乱七八糟，但还是弄不明白

我需要以下公式：

1,2 - grey
3,4 - white
5,6 - grey
7,8 - white
9,10 - grey

---

等等。我不希望在html中添加类，因为我相信这将是一些人的建议。如果有一种方法可以解决第n个孩子的问题，那就是我要找的。

意识到你在做4人一组的实验，你可以看到，你可以让每4个元素和每4个元素减去1为白色，然后每4个元素减去2，或者每4个元素减去3为灰色

因此，您将使用

4n

和

4n-1

，然后使用

4n-2

和

4n-3

：

div:nth-child(4n), div:nth-child(4n-1) {
    background: red;
}
div:nth-child(4n-2), div:nth-child(4n-3) {
    background: blue;
}

那个代码对你的情况不准确，我写它是为了

---

NB免责声明：请记住，

n子项

在IE8中不起作用。当然是典型问题。

下面是我用来右对齐每个表的第一列的内容

table td:nth-child(2n-1) {
    align: right;
    text-align: right;
}

---

@Eric的回答完全正确-但是如果您想轻松地将其扩展到3、4、5等组，并且您正在使用Sass，下面是代码（如果您想要更多组，只需增加

$largestGroupSize

）：

然后在标记中，在

元素上，只需添加带有分组行的class

表

和

组{n}

。例如，如果您想要一个包含3个组的表，您可以编写：

<table class="table-with-grouped-rows groups-of-3">

---

轰。

请发布您的代码，您尝试了什么？这几乎就像您通过更改元素和颜色故意偏离他的案例：P@BoltClock可爱的。。。但是

div

s的标记比

table

s少，

blue

/

red

更容易看到。）我认为提问的目的是为了学习，而不是为了得到你可以复制/粘贴的东西。如果你不能翻译一个使用不同于你的准确标记的解决方案，你如何希望成为一名前端设计师？@samseabom如果你想让你的代码为生产做好准备，你可以随时雇佣Eric…这个fiddle是一个基于Eric原始示例的干净解决方案：

<table class="table-with-grouped-rows groups-of-3">