nth-Child repeat in a loop

问题

Folks,

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

BLUE

GREEN

PURPLE

RED

GREEN

RED

PURPLE

GREEN

BLUE

RED

PURPLE

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

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>

回答1:

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>

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

来源：https://stackoverflow.com/questions/39484034/nth-child-repeat-in-a-loop