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 example

与nth-child的造型

2 个答案: