CSS Nth-Child Checkered

Question

我试图用nth-child来改变div的背景颜色。下面是我想要如何更改背景颜色的图像。我怎么能和n-child一起做这个？

每个方框的宽度应为其父容器的25％。

Answer 1

由于它是8个元素的重复模式，您可以使用它来创建CSS：

div:nth-child(8n+1),
div:nth-child(8n+3),
div:nth-child(8n+6),
div:nth-child(8n) {
    background-color:black
}
div:nth-child(8n+2),
div:nth-child(8n+4),
div:nth-child(8n+5),
div:nth-child(8n+7) {
    background-color:gray
}

小提琴：http://jsfiddle.net/RvbsL/2/

Answer 2

在这种情况下，您可以使用:even和:odd：

div:nth-child(even) {
    background-color:grey;
}

div:nth-child(odd) {
    background-color:black;
}

jsFiddle here

Answer 3

这似乎不太可能 - 您需要做的是使用模数来改变颜色应用的顺序取决于您所在的行，但您只能添加或减法 - 在此解释 - nth-child with mod (or modulo) operator

替代解决方案：

1. 将div中的每个“行”换行，以便您可以选择每隔一行 另外说灰色首先应该是黑色。
2. 使用JS循环遍历可以使用模数的元素，并添加一个类 每隔一行并翻转背景颜色的方式。
3. 与2类似，只是在加载页面之前将类放在代码中的元素上
编辑：刚刚意识到我完全错了，你可以这样做，因为它是一个重复的模式，每8个div而不是每4个。当然，在我能把解决方案放在一起之前，Andi打败了我。 Touche - 干得好！

Answer 4

不确定它是否是您问题的最优雅解决方案，但是使用div将div排成行，我能够对奇数和偶数行进行排序，并将样式应用于他们的奇数或偶数孩子。

看看这里：http://jsfiddle.net/3ASE8/

#div_parent {
    width: 500px;
}
.child {
    display: inline-block;
    margin: 5px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: #333;
    color: red;
}

.row:nth-child(odd) .child:nth-child(even) {
 background-color: #ccc!important;    
}
.row:nth-child(even) .child:nth-child(odd) {
 background-color: #ccc!important;    
}