CSS Nth-Child Checkered [关闭]答案

【问题标题】：CSS Nth-Child Checkered [closed]CSS Nth-Child Checkered [关闭]
【发布时间】：2014-04-30 17:44:57
【问题描述】：

我正在尝试使用 nth-child 来更改 div 的背景颜色。下面是我想如何更改背景颜色的图像。我将如何处理第 n 个孩子？

每个盒子的宽度应为其父容器的 25%。

【问题讨论】：

【解决方案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/

【讨论】：

完全正确，这个想法击中了我，并在我编辑答案之前看到了这个帖子。不错
您可以删除第一行 CSS 并在所有 div 上应用黑色背景，nt-child() 选择器更具体，并将用灰色覆盖第一个 css 属性。 jsfiddle.net/webtiki/A9Qs9
对于响应式版本（每行 1 个到每行 5 个），请查看此 css 完整棋盘示例jsfiddle.net/Choufourax/pb09o5fa/1

【解决方案2】：

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

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

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

jsFiddle here

【讨论】：

我想做的是浮动 div，使它们的宽度为 25%。第二行应该交换颜色。看到这个小提琴。 jsfiddle.net/RvbsL/1

【解决方案3】：

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

替代解决方案：

将每个“行”包装在一个 div 中，以便您可以选择每隔一行分别说灰色应该优先与黑色。
使用JS循环遍历可以使用模数的元素，并添加一个类每隔一行并翻转应用背景颜色的方式。
与2类似，只是在页面加载之前将类放在代码中的元素上

编辑：刚刚意识到我完全错了，你可以这样做，因为它是每 8 个 div 而不是每 4 个 div 的重复模式。当然，在我能把解决方案放在一起之前，安迪打败了我。 Touche - 干得好！

【讨论】：

谢谢，这是有道理的。

【解决方案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;    
}

【讨论】：

我刚刚读到宽度应该是 25% 而不是固定的像素大小。我在这里做了修改：jsfiddle.net/3ASE8/1