CSS Nth-Child方格 [英] CSS Nth-Child Checkered

问题描述

我正在尝试使用nth-child更改div的背景颜色.以下是我要如何更改背景颜色的图像.我将如何与nth-child做到这一点?

I'm trying to use nth-child to change background colors of divs. Below is an image of how I want to change the background colors. How would I do this with nth-child?

每个盒子的宽度应为其父容器的25％.

Each box should be 25% width of it's parent container.

推荐答案

由于它是8个元素上的重复模式，因此可以使用它来创建CSS:

Since it's a repeating pattern over 8 elements, you can use that to create the 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/

这篇关于CSS Nth-Child方格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！