第n个孩子重复

Question

伙计们，

我有100 < p>标签，我想重复一组四色的每行中的波纹管方式。

RED

BLUE

GREEN

PURPLE

RED

BLUE

GREEN

PURPLE ....等

产生的输出是不作为我希望。 输出是

RED

BLUE

GREEN

PURPLE

RED

GREEN

RED

PURPLE

GREEN

BLUE

RED

PURPLE

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

这里是我的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> 

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