更改每隔5格的顏色

Question

我有很多div，彼此之後，每行4。 我正在使用nth-child選擇器來更改每隔4格的填充。

現在我想每5次更改一次翻轉屬性。

是這樣的：

.content_tab_hover:nth-child(5n+1){ 
    background: #ce1c5e; 
} 
.content_tab_hover:nth-child(5n+2){ 
    background: #009acf; 
} 
.content_tab_hover:nth-child(5n+3){ 
    background: #fcc712; 
} 
.content_tab_hover:nth-child(5n+4){ 
    background: #742f68; 
} 
.content_tab_hover:nth-child(5n+5){ 
    background: #389a28; 
} 

小提琴：http://jsfiddle.net/craigzilla/TuRzD/

我要去哪裏錯了任何想法？

Answer 1

你沒有針對正確的DIV。它應該是：

.content_tab:nth-child(5n+1) .content_tab_hover{ 
    background: #ce1c5e; 
} 
.content_tab:nth-child(5n+2) .content_tab_hover{ 
    background: #009acf; 
} 
.content_tab:nth-child(5n+3) .content_tab_hover{ 
    background: #fcc712; 
} 
.content_tab:nth-child(5n+4) .content_tab_hover{ 
    background: #742f68; 
} 
.content_tab:nth-child(5n+5) .content_tab_hover{ 
    background: #389a28; 
} 

.content_tab_hover:nth-child(n)選擇來自每個.overlay DIV第n .content_tab_hover元件。

Answer 2

您需要更改選擇器。在第n個孩子應該是.content_tab:nth-child() .content_tab_hover代替.content_tab_hover:nth-child()...

上試試這個：

.content_tab:nth-child(5n+1) .content_tab_hover{ 
    background: #ce1c5e; 
} 
.content_tab:nth-child(5n+2) .content_tab_hover{ 
    background: #009acf; 
} 
.content_tab:nth-child(5n+3) .content_tab_hover{ 
    background: #fcc712; 
} 
.content_tab:nth-child(5n+4) .content_tab_hover{ 
    background: #742f68; 
} 
.content_tab:nth-child(5n+5) .content_tab_hover{ 
    background: #389a28; 
} 

更新的jsfiddle：http://jsfiddle.net/TuRzD/6/