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');
}

这是单个元素背景的代码。我希望这段代码更改列表中每个“a”元素的背景，而不是“li”元素！

4

2 回答 2

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在每个.nav li:nth-child(). 请注意，您不能通过将选择器更改为来提高此代码的效率，.nav li a:nth-child()因为似乎a每个只有一个li，因此nth-child计数器永远不会过去1。

但是，我建议您将背景图像声明抽象到它自己的选择器中，这样您就不会重复自己：

.nav李一个{
    背景图像：url（'noise.png'）；
}
于 2013-08-18T11:35:57.713 回答
0

更改列表中每个“a”元素的背景，而不是“li”元素

然后选择那个，而不是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 回答