Question

我想为每个列表元素创建一个具有不同背景的菜单！

/* 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”元素！

Answer 1

要设置a标记的样式，您必须在选择器中指定它。目前，您的CSS为li元素提供了背景，因为这是它正在搜索的内容。您需要在每个结尾添加a，如下所示：

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

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

}

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

}

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

}

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

}

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

这告诉引擎在每个a中找到.nav li:nth-child()。请注意，通过将选择器更改为.nav li a:nth-child()，您无法提高此代码的效率，因为每a似乎只有一个li，因此nth-child计数器永远不会获得过去1。

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

.nav li a {
    background-image: url('noise.png');
}

Answer 2

更改列表的每个“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); }
/*                      ^  */

每个列表元素的“a”的单独背景？

2 个答案: