nth-Child循环重复 [英] nth-Child repeat in a loop

问题描述

伙计，

我有100< p>标签，而我正尝试以波纹管方式在每行中重复使用四种颜色。

红色

蓝色

绿色

紫色

RED

蓝色

绿色

紫色
....等等

i have 100 < p> tags and i'm trying to repeat a set of four color to every row in a bellow manner.

RED

BLUE

GREEN

PURPLE

RED

BLUE

GREEN

PURPLE ....and so on

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

The output generated is not as i desired. The output is

RED

蓝色

绿色

紫色

红色

绿色

红色

紫色

绿色

蓝色

RED

紫色

RED

BLUE

GREEN

PURPLE

RED

GREEN

RED

PURPLE

GREEN

BLUE

RED

PURPLE

因此，如果您有任何建议对我有帮助，：）

so if you have any suggestion that would be helpful for me, :)

这是我的CSS代码。

here is my css code.

<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将为您提供所需的解决方案。

The following CSS will give you the solution you require.

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

Simple working example at fiddle http://jsfiddle.net/yugi47/Nwf2A/59/

这篇关于nth-Child循环重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！