Question

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

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

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

Answer 1

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

http://jsfiddle.net/bmMjm/

Answer 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，因此严格来说第一个块并不是必需的。

nth-children影响3个输入组

2 个答案: