css - 与第 n 个孩子一起造型

Question

我想要完成的是，前两个部分是白色的，然后是两个灰色部分，然后该模式继续。

我做了一个 jsfiddle 来展示我到目前为止所拥有的：jsfiddle

CSS：

section{
      float:left;
      width:40%;
      background:#ccc;
      padding:20px 25px;
      margin-bottom:2px
}
section:nth-child(even){
      margin-left:2px;
}
section:nth-child(1),
section:nth-child(2n+2){
      background:#fff;
}

HTML：

<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>

我需要使用另一个:nth-child()来使这项工作正常吗？或者这会更好地使用jquery吗？

PHP 被用于生成这些框，那么 php 方法是最好的方法吗？也许上课？

Answer 1

Nth-child 是你想要的，但你正在寻找的是这样的：

http://tinker.io/f5c5c

section:nth-child(4n+1),
section:nth-child(4n+2){
      /* styles here */

}

Answer 2

尝试这个：

section {
    float:left;
    width:40%;
    background:#fff;
    padding:20px 25px;
    margin-bottom:2px
}
section:nth-child(even) {
    margin-left:2px;
}
section:nth-child(4n),section:nth-child(4n-1) {
    background:#ccc;
}

jsFiddle 示例