Question

我有很多div之后，每排4个。我正在使用第n个子选择器来更改每个第4个div的填充。

现在我想每隔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

您需要更改选择器。第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/

Answer 2

您没有定位正确的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)从每个.content_tab_hover DIV中选择第n个.overlay元素。

改变每个第5个div的颜色

2 个答案: