Question

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

我在<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中，'color'指的是字体颜色。你想使用背景颜色。所以你的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);
}

Answer 2

我建议你为颜色设置类，比如说

.green {
 background-color:green;
}

.red {
 background-color:red;
}

通过这种方式，您可以简单地为每个列表元素分配类

<li class="green"></li>

加上额外的好处是你没有在网页上设置所有ul元素的样式。

Answer 3

正如@faludi所提到的，您可以从li - 1开始引用每个nth-child(1)，依此类推。或者您可以使用odd和even。

对于悬停颜色，您可以执行以下操作...

ul li:hover {
  background-color: #bbbfff;  
}

jsfiddle demo

Answer 4

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

来自 faludi 的解决方案，检测垂直菜单的li元素并按顺序更改背景。

通过css </li>更改垂直菜单的<li>的颜色

4 个答案: