nth-child 影响 3 个输入组答案

【问题标题】：nth-child affecting groups of 3 inputsnth-child 影响 3 个输入组
【发布时间】：2013-11-01 15:03:42
【问题描述】：

我有一个处理课程申请的输入表单，它会根据申请人的数量动态添加额外的输入 - 每个申请人填写他们的姓名、电子邮件和电话号码。因此，如果用户选择了 2 个申请者，则表单会在默认的 3 个输入之后添加 3 个新输入，依此类推。

我想通过交替每组三个输入的背景颜色来提高表单的可用性，例如前三个是灰色的，接下来的三个是白色的，接下来的三个是灰色的等等。

我认为我可以用 nth-child 做到这一点，但我不知道怎么做。输入在它们自己的 div 中，因此很容易影响它们，我只是不知道在第 n 个子括号中放什么来实现它。

【问题讨论】：

一些基本的 HTML 会很有用。也许是一个 JSFiddel？

【解决方案1】：

div:nth-child(6n),
div:nth-child(6n-1),
div:nth-child(6n-2){
    background-color: red;
}

http://jsfiddle.net/bmMjm/

【讨论】：

一旦我选择了正确的选择器，这效果很好，非常感谢。

【解决方案2】：

您正在做一个每 6 个项目重复一次的模式。因此，您需要基于:nth-child(6n)。不幸的是，这有点冗长......

input:nth-child(6n+1), input:nth-child(6n+2), input:nth-child(6n+3) {
    background: white;
}
input:nth-child(6n+4), input:nth-child(6n+5), input:nth-child(6n) {
    background: lightgrey;
}

jsFiddle

显然默认是white，所以严格来说第一个块不是必需的。

【讨论】：