0

我有很多 div 一个接一个，每行 4 个。我正在使用 nth-child 选择器来更改每 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/

有什么想法我哪里出错了吗？

4

2 回答 2

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/

于 2013-06-05T22:56:34.403 回答
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)从每个DIV 中选择第 n 个.content_tab_hover元素。.overlay

于 2013-06-05T22:56:22.387 回答