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

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

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

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

jsFiddle 在这里