css - 通过 css 更改垂直菜单的 的颜色

Question

我想更改在 <ul> 中创建的垂直菜单的颜色和 <li>按其顺序着色。我不想给每个 <li>使背景丰富多彩的类。但我需要 css 来计算它 - nth: 例如。

说我在 <li> 中有 10 个菜单项:

<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
<li>menu 6</li>
<li>menu 7</li>
<li>menu 8</li>
<li>menu 9</li>
<li>menu 10</li>
</ul>

然后我需要用css改变每个元素的背景颜色和悬停状态。所以我应用了 css:

ul li:nth-child(1) {  
  background-color: #ccc;
}

然后我就卡在这里了。我不知道如何制作每个 <li>指定的背景颜色。请你们提出一个绝妙的解决方案。

问候，

Answer 1

在 CSS 中，“颜色”指的是字体颜色。你想使用背景颜色。所以你的 CSS 看起来像

ul li:nth-child(1) {  
  background-color: #ccc;
}
ul li:nth-child(2) {
  background-color: rgb(60,100,60);
}
etc....

如果你想用交替的颜色条纹它，你可以这样做

ul li:nth-child(odd) {  
  background-color: #ccc;
}
ul li:nth-child(even) {
  background-color: rgb(60,100,60);
}