0

リスト要素ごとに背景が異なるメニューを作りたい！

/* Adding some background color to the different menu items */

.nav li:nth-child(6n+1) {background: rgb(208, 101, 3); 
    background-image: url('noise.png');}

.nav li:nth-child(6n+2) {
    background: rgb(233, 147, 26);
    background-image: url('noise.png');

}

.nav li:nth-child(6n+3) {
    background: rgb(22, 145, 190);  
    background-image: url('noise.png');

}

.nav li:nth-child(6n+4) {
    background: rgb(22, 107, 162);  
    background-image: url('noise.png');

}

.nav li:nth-child(6n+5) {
    background: rgb(27, 54, 71);    
    background-image: url('noise.png');

}

.nav li:nth-child(6n+6) {
    background: rgb(21, 40, 54);
    background-image: url('noise.png');
}

これは、個々の要素の背景のコードです。このコードで、「li」要素ではなく、リストの各「a」要素の背景を変更したい!

4

2 に答える 2

0

「li」要素ではなく、リストの各「a」要素の背景を変更します

li次に、 !ではなく、それを選択します。

.nav li a { background-image: url('noise.png'); }
/*      ^  */
.nav li:nth-child(6n+1) a { background-color: rgb(208, 101, 3); }
.nav li:nth-child(6n+2) a { background-color: rgb(233, 147, 26); }
.nav li:nth-child(6n+3) a { background-color: rgb(22, 145, 190); }
.nav li:nth-child(6n+4) a { background-color: rgb(22, 107, 162); }
.nav li:nth-child(6n+5) a { background-color: rgb(27, 54, 71); }
.nav li:nth-child(6n+6) a { background-color: rgb(21, 40, 54); }
/*                      ^  */
于 2013-08-18T12:10:17.047 に答える
0

タグのスタイルをa設定するには、セレクターでそれを指定する必要があります。現時点では、CSS はli要素に背景を提供しています。それが検索対象だからです。a次のように、それぞれの末尾に追加する必要があります。

.nav li:nth-child(6n+1) a {
    背景: rgb(208, 101, 3);
    背景画像: url('noise.png');}

.nav li:nth-child(6n+2) a {
    背景: RGB(233, 147, 26);
    背景画像: url('noise.png');

}

.nav li:nth-child(6n+3) a {
    背景: RGB(22, 145, 190);  
    背景画像: url('noise.png');

}

.nav li:nth-child(6n+4) a {
    背景: rgb(22, 107, 162);  
    背景画像: url('noise.png');

}

.nav li:nth-child(6n+5) a {
    背景: rgb(27, 54, 71);    
    背景画像: url('noise.png');

}

.nav li:nth-child(6n+6) a {
    背景: rgb(21, 40, 54);
    背景画像: url('noise.png');
}

これは、エンジンaに each でを検索するように指示します.nav li:nth-child()。セレクターをに変更しても、このコードをより効率的にする.nav li a:nth-child()ことはできないことに注意してください。alinth-child1

ただし、背景画像の宣言を独自のセレクターに抽象化して、同じことを繰り返さないようにすることをお勧めします。

.navlia {
    背景画像: url('noise.png');
}
于 2013-08-18T11:35:57.713 に答える