css第n个子选择器,用于子对象2、3、6、7、10、11、14、15等

css第n个子选择器,用于子对象2、3、6、7、10、11、14、15等,css,css-selectors,Css,Css Selectors,结构如下:我有3篇文章,每篇文章都有一篇特色文章。每2、3、6、7、10、11、14、15等区块的特色文章应位于2篇较小的文章下方 <div class="group"> <article class="feature"> <h1>Block 1</h1> <div></div> </article> <article> <

结构如下:我有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>

第一区
标题
标题
第2区
标题
标题
这个css子选择器是什么?我搞不懂算法是什么

                  ___________ 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;
}
.group{
宽度:300px;
浮动:左;
利润率:0 20px 20px 0;
}
文章{
宽度:150px;
高度:150像素;
背景色:#666;
浮动:左;
}
文章特点{
宽度:300px;
高度:300px;
}
.组:第n个儿童(4n+2)文章{
背景颜色:蓝色;
}
.组:第n个儿童(4n+3)文章{
背景颜色:绿色;
}

第一区
标题
标题
第2区
标题
标题
第3区
标题
标题
第4区
标题
标题
第5区
标题
标题
第6区
标题
标题
第7区
标题
标题
第8区
标题
标题
第9区
标题
标题
第10区
标题
标题
第11区
标题
标题
第12区
标题
标题
第13区
标题
标题
第14区
标题
标题
第15区
标题
标题
第16区
标题
标题
第17区
标题
标题
第18区
标题
标题

你所说的:应该放在2篇较小的文章下面是什么意思?为什么不每次都把专题文章放在第3位呢?为没有真正连贯的问题道歉-1:)这很有效:。组:第n个孩子(4n-1),。组:第n个孩子(4n-2)。我得到了一个json提要,想让css来完成所有的工作。请注意,用于标记一组文章的标记是,所以不要使用
,只需使用
@Benio,这些组都在div中,因为它们都在一个顶级部分中-不需要多个部分。这个答案非常棒。我很长时间都在想这个问题。终于找到你的答案了。非常感谢@caramba。