css nth儿童选择器为儿童2,3,6,7,10,11,14,15等

Question

结构在这里：http://jsfiddle.net/9ghUA/1/我有3篇文章，每篇文章都有一篇专题文章。每2,3,6,7,10,11,14,15等块特色文章应位于2篇较小的文章之下。

<div class="group">
    <article class="feature">
        <h1>Block 1</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 2</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>

这个css子选择器会是什么？我无法弄清楚算法是什么？

Answer 1

                  ___________ every 4th element
                 |   ________ starting point seccond
                 |  |
.group:nth-child(4n+2) article {
    background-color: blue;
}

                  ___________ every 4th element
                 |   ________ starting point third
                 |  |
.group:nth-child(4n+3) article {
    background-color: green;
}

＆＃13;

＆＃13;

.group {
    width: 300px;
    float: left;
    margin: 0 20px 20px 0;
}

article {
    width: 150px;
    height: 150px;
    background-color: #666;
    float: left;
}
article.feature {
    width: 300px;
    height: 300px;
}
.group:nth-child(4n+2) article {
    background-color: blue;
}
.group:nth-child(4n+3) article {
    background-color: green;
}

＆＃13;

<div class="group">
    <article class="feature">
        <h1>Block 1</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 2</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 3</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 4</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 5</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 6</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 7</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 8</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 9</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>



<div class="group">
    <article class="feature">
        <h1>Block 10</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 11</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 12</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 13</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 14</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 15</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 16</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 17</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>
<div class="group">
    <article class="feature">
        <h1>Block 18</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
    <article>
        <h1>heading</h1>
        <div></div>
    </article>
</div>

＆＃13;

＆＃13;

＆＃13;