Css ：引导行中的第n个子项

目前，我有一个页面，在引导中加载PHP数组并创建行。PHP正在为列计数生成一个随机数（col-sm-4、col-sm-3等是随机创建的，直到加起来是12）

引导容器中的一行示例：

    <div class="row equal project-row">
        <article class="col-sm-4 project">
            <header class="project-title">title</header>
            <p class="project-desc">text</p>
        </article>
        <article class="col-sm-3 project">
            <header class="project-title">title</header>
            <p class="project-desc">text</p>
        </article>
        <article class="col-sm-4 project">
            <header class="project-title">title</header>
            <p class="project-desc">text</p>
        </article>
        <article class="col-sm-1 project">
            <header class="project-title">title</header>
            <p class="project-desc">text</p>
        </article>
    </div>

然而，迭代的颜色只在每一行内改变；例如，在上面代码的示例行中，它将显示前四种颜色（5n+1、5n+2、5n+3和5n+4），但如果有第二行，它将从5n+1开始，而不是从5n+5开始

我意识到这是由行引起的-在添加这些行之前，这很好。但是，在我当前的框架内，我对使用的最佳方法有点迷茫，因此项目类是完全迭代的

下面是一个示例，有两行显示它没有遍历所有5个颜色选项（第5行是红色）

---

谢谢你的帮助

如果使用服务器语言输出行，则可以使用MOD函数，然后使用If语句根据MOD输出为行颜色添加一个类

另一种选择是使用jquery执行相同类型的操作。在索引1 addClass（'bgcolor-blue'）、if 2 addClass（'bgcolor-ltblue'）……等处迭代每一行

这将是一个关于最佳方法的明确例子

<style>
.project:nth-child(5n+1) {
    background: rgba(32,78,127,1);
}
.project:nth-child(5n+2) {
    background: rgba(6,133,135,1);
}
.project:nth-child(5n+3) {
    background: rgba(79,185,159,1);
}
.project:nth-child(5n+4) {
    background: rgba(109,242,87,1);
}
.project:nth-child(5n+5) {
    background: rgba(214,77,53,1);
}

</style>


<div class='row equal project-row'>
    <article class="col-sm-4 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
    <article class="col-sm-3 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
    <article class="col-sm-4 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
    <article class="col-sm-1 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
</div>

<div class='row equal project-row'>
    <article class="col-sm-4 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
    <article class="col-sm-3 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
    <article class="col-sm-4 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
    <article class="col-sm-1 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
</div>

<script>
$(document).ready(function(){

    $('article').unwrap();  
    $('article').wrapAll('<div class="row equal project-row">')      

});
</script>

.项目：第n个孩子（5n+1）{
背景：rgba（32,78127,1）；
}
.项目：第n个孩子（5n+2）{
背景：rgba（6133135,1）；
}
.项目：第n个孩子（5n+3）{
背景：rgba（79185159,1）；
}
.项目：第n个孩子（5n+4）{
背景：rgba（109242,87,1）；
}
.项目：第n个孩子（5n+5）{
背景：rgba（214,77,53,1）；
}

我希望这有助于……
你好，贾德森！我在想，我可能已经使用jQuery了——有没有任何方法可以单独使用CSS中的第n个子元素等选择器呢？没有，因为你正在通过为每4个项目类文章标记创建行来实际分解结构。我的建议是重新做静态标记，或者编写jquery插件，每生成5个标记，就将标记包装到项目行标记中。我将创建一个JSFIDLE向您展示……我编辑了我的原始答案。请记住，从架构的角度来看，您需要知道您在视觉上试图产生什么，您是否试图视觉化地表示5人一组？一群人？等等。您的标记应该与此同时进行。如果您的标记必须保持现有的方式，那么我的解决方案可以很好地工作。您还可以将其更改为使用.each（）对它们进行迭代，然后每5次迭代一次，结束并开始一个新的项目行div，等等。这就是我所拥有的全部：巨大的帮助；需要从外面看一下，你显然是看到它的合适人选！非常感谢。干杯-问题！很高兴能帮上忙！
<style>
.project:nth-child(5n+1) {
    background: rgba(32,78,127,1);
}
.project:nth-child(5n+2) {
    background: rgba(6,133,135,1);
}
.project:nth-child(5n+3) {
    background: rgba(79,185,159,1);
}
.project:nth-child(5n+4) {
    background: rgba(109,242,87,1);
}
.project:nth-child(5n+5) {
    background: rgba(214,77,53,1);
}

</style>


<div class='row equal project-row'>
    <article class="col-sm-4 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
    <article class="col-sm-3 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
    <article class="col-sm-4 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
    <article class="col-sm-1 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
</div>

<div class='row equal project-row'>
    <article class="col-sm-4 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
    <article class="col-sm-3 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
    <article class="col-sm-4 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
    <article class="col-sm-1 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
</div>

<script>
$(document).ready(function(){

    $('article').unwrap();  
    $('article').wrapAll('<div class="row equal project-row">')      

});
</script>