每两个表行的第 n 个孩子 [英] nth-child for every two table rows

问题描述

我需要将表格的每两行设为灰色，如果可能，我更愿意使用 nth-child.

I need to make every two rows of my table grey and I would prefer to use nth-child if possible.

我搞砸了 Chris Coyier 的 nth-child 测试员，但是还是拿不到.

I've messed around with Chris Coyier's nth-child tester but still can't get it.

我需要以下公式:

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

等等.我不想在 html 中放置一个类，因为我确信这将是一些人的建议.如果有办法用 nth-child 解决这个问题，那就是我正在寻找的.

and so on. I'd prefer not to put a class in the html as I'm sure that's going to be a suggestion from some. If there is a way to pull this off with nth-child, that's what I'm looking for.

推荐答案

意识到你正在做 4 个一组，那么你可以看到你可以让每 4 个元素和每 4 个元素减去一个为白色，然后每 4 个元素减 2，或每 4 个元素减 3 为灰色.

Realize that you are doing groups of 4, then you can see that you can have every 4th element and every 4th element minus one being white, then every 4th element minus two, or every 4th element minus 3 being grey.

所以，你会使用 4n 和 4n-1，然后是 4n-2 和 4n-3:

So, you'd use 4n and 4n-1, then 4n-2 and 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;
}

该代码对您的情况并不精确，我为 jsFiddle 概念验证编写了它.

That code isn't precise to your case, I wrote it for a jsFiddle proof-of-concept.

NB 免责声明:请记住，nth-child 在 IE8 中不起作用.当然是典型问题.

NB disclaimer: Keep in mind that nth-child does not work in IE8. Typical issue, of course.

这篇关于每两个表行的第 n 个孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！