css - nth-Child 循环重复

Question

friend 们，

我有 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>

Answer 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>

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