nth-Child 在循环中重复答案

【问题标题】：nth-Child repeat in a loopnth-Child 在循环中重复
【发布时间】：2016-09-14 06:44:36
【问题描述】：

各位，

我有 100 个

标签，我正在尝试以如下方式对每一行重复一组四种颜色。

红色

蓝色

绿色

紫色

红色

蓝色

绿色

紫色 ....等等

生成的输出不是我想要的。输出是

红色

蓝色

绿色

紫色

红色

绿色

红色

紫色

绿色

蓝色

红色

紫色

所以如果你有任何对我有帮助的建议，:)

这是我的 CSS 代码。

<style>    
p:nth-child(1n) {
        background: red;
    }
    p:nth-child(2n) {
        background: blue;
    }
    p:nth-child(3n) {
        background: green;
    }
    p:nth-child(4n) {
        background: purple;
    }
</style>

【问题讨论】：

标签： css

【解决方案1】：

以下 CSS 将为您提供所需的解决方案。

<style>    
p:nth-child(4n+1) {
        background: red;
    }
    p:nth-child(4n+2) {
        background: blue;
    }
    p:nth-child(4n+3) {
        background: green;
    }
    p:nth-child(4n+4) {
        background: purple;
    }
</style>

小提琴http://jsfiddle.net/yugi47/Nwf2A/59/的简单工作示例

【讨论】：