0

我想更改创建的垂直菜单的颜色，<ul>并按<li>其顺序着色。我不想给每个人<li>上一堂课来让背景变得丰富多彩。但我需要 css 来计算它 - 例如 nth:。

说我有 10 个菜单项<li>：

<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>成为指定的背景颜色。请你们提出一个绝妙的解决方案。

问候，

4

4 回答 4

2

在 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);
}
于 2013-06-13T03:39:18.237 回答
0

我建议您为颜色设置课程，例如

.green {
 background-color:green;
}

.red {
 background-color:red;
}

这样您就可以简单地将类分配给每个列表元素

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

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

于 2013-06-13T03:37:08.527 回答
0

正如@faludi 所提到的，您可以以-等li开头引用每个。或者您可以只使用and 。1nth-child(1)oddeven

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

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

jsfiddle 演示

于 2013-06-13T03:48:27.383 回答
0 
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 元素并按其顺序更改背景。

于 2013-06-13T04:39:00.207 回答