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

问题描述

我需要让我的表格的每两行都是灰色的，如果可能，我更喜欢使用nth-child。

=http://css-tricks.com/examples/nth-child-tester/> Chris Coyier的第三个孩子测试者，但仍然无法得到。

我需要以下公式：

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

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

谢谢！

解决方案

意识到你正在做一组4，然后你可以看到，你可以有每4个元素和每4个元素减去一个白色，然后每四个元素减二，

所以，你可以使用 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; 
} 
  

这个代码并不精确到你的情况， a href =http://jsfiddle.net/Wte4w/> jsFiddle proof-of-concept 。

注意免责声明：请记住 nth-child 在IE8中不起作用。当然是典型的问题。

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

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

I need the following formula:

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

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.

Thanks!

解决方案

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.

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;
}

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

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

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