0

各行に4つずつ、たくさんのdivがあります。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

セレクターを変更する必要があります。.content_tab:nth-child() .content_tab_hover代わりにn 番目の子を on にする必要があります.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 に答える