css - 与第 nth-child 造型

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 */

}