如何制作每一个` <li> `有不同的背景颜色？

Question

如何使每种<li>具有不同的背景颜色？

<!DOCTYPE html>
<html lang="en">
   <head>
<meta charset="UTF-8">
<title>Title</title>
 </head>
<body>
 <div id="dvi1" class="div1">
    <ul id="ul" class="ul">
      <li>11</li>
      <li>22</li>
      <li>33</li>
      <li>44</li>
   </ul>
</div>
</body>
</html>

Answer 1

这是一个示例，我遍历文档中的所有li元素并更改其background颜色。 我预先定义了颜色，之后我只使用Math.random()从给定的数组中获取随机颜色。

 $('li').each(function() { var back = ["green","blue","gray","yellow","orange","purple","black"]; var rand = back[Math.floor(Math.random() * back.length)]; $(this).css('background',rand); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="dvi1" class="div1"> <ul id="ul" class="ul"> <li>11</li> <li>22</li> <li>33</li> <li>44</li> </ul> </div> </body> </html>

编辑：根据评论中的要求 ，我添加了一个函数，它将阻止循环连续两次设置相同的颜色。

 var lastPick; var rand; $('li').each(function() { $(this).css('background',randomColor()); }); function randomColor() { var back = ["green","blue","gray","yellow","orange","purple","pink"]; rand = back[Math.floor(Math.random() * back.length)]; rand==lastPick?randomColor():rand; lastPick = rand; return rand; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="dvi1" class="div1"> <ul id="ul" class="ul"> <li>11</li> <li>22</li> <li>33</li> <li>44</li> </ul> </div> </body> </html>

Answer 2

使用CSS非常容易。 您可以使用:nth-child或:nth-of-type伪选择器。

基础

为了让事情变得非常简单，让我们考虑以下HTML（我将在稍后添加您的代码）：

<div>
  <p>This is our first paragraph</p> <!-- This one should be blue -->
  <p>This is our second paragraph</p> <!-- This one should be red -->
</div>

基于此HTML，如果我们想要使<p>元素具有不同的颜色，我们可以编写以下任一CSS：

选项1

p:nth-of-type(1) {
color: blue;
}

p:nth-of-type(2) {
color: red;
}

选项2

p:nth-child(1) {
color: blue;
}

p:nth-child(2) {
color: red;
}

很容易看到这里发生了什么。 括号内的数字表示要选择的元素（1 =第一个元素，2 =第二个元素，3 =第三个元素.etc）。 如果我们不想为每个可能数量的元素手动写出大量的CSS，这没有多大帮助。

以您自己的代码为例。 你有一个列表 - 该列表可能只用于具有固定数量元素的东西（如导航菜单）。 在哪种情况下，没问题。 我们知道我们需要设置样式的项目数量，因此我们可以（可能）愉快地为少数元素编写CSS。

但是，如果您的列表是动态填充的（从数据库或通过Javascript），那么可能会有无限数量的元素。 或者，如果我们仍然知道列表有多大，并且恰好列表将会非常大 - 那么我们应该找到一种更有效的编写CSS的方法。 这让我开始......

正规则

n规则只不过是代数，它是最基本的形式。 你还记得那些在学校被问过的烦人的数学问题吗？

如果n = 2，那么5n + 1是多少？

是的，他们回来困扰着你。 在上述问题的情况下 - 我们知道答案是11. n规则或多或少以相同的方式编写：

li:nth-of-type(5n+1) {
color: green;
}

在上面的例子中，我们选择每个第5个元素。 如果我们将n-规则写成2n+1 ，我们将选择每隔一个（每两个）元素。 因此， 10n+1的规则将选择每10个元素。 元素之间的间隙增加或减少，取决于n之前的乘数的值。

如果我们没有改变乘数，但改变了我们的n规则的+1部分，我们将改变偏移（即受我们规则影响的第一个元素）。 +1基本上是说“从第一个元素开始”。 所以+2会在第二个元素上启动我们，依此类推。

这也意味着你可以有一个像3n-1这样的规则，这将导致我们从最后一个元素开始。

所以，举一个你的代码的例子。 让我们说你想要列表中的以下内容：

第一项应该是粗体
第二个项目应该有蓝色背景
第三项应该有红色文字
对于列表中的每个3个项目组，应重复此模式

您可以编写以下CSS规则：

li:nth-of-type(3n+1) {
font-weight: bold;
}

li:nth-of-type(3n+2) {
background: blue;
}

li:nth-of-type(3n+3) {
color: red;
}

但为什么这有效呢？ 如果你想了解更多，并对n规则做一些实验 - 看看CSS Tricks：nth Tester

最后

现在你可能在想“有什么区别:nth-of-type和:nth-child ？”

：nth-child selector：如果满足以下两个条件，则会将CSS样式应用于元素：

它与我们指定的元素直接匹配。
它是父元素的第n个子元素。

：nth-of-type选择器：如果满足以下条件，则将CSS样式应用于元素：

它与我们指定的元素直接匹配。

这两者之间存在细微差别。 但基本上， :nth-child对它选择的内容更具体。 哪个可以使用它 - 因为我们可以使用:nth-of-type指定规则，然后使用:nth-child来覆盖特定元素的规则。

在这里阅读更多相关信息

希望这可以帮助：）

如何制作每一个` <li> `有不同的背景颜色？

问题描述

2 个解决方案

解决方案1
6 已采纳 2016-08-13 17:05:07

解决方案2
1 2016-08-13 18:36:33

基础

正规则

最后

如何制作每一个` <li> `有不同的背景颜色？

问题描述

2 个解决方案

解决方案1 6 已采纳 2016-08-13 17:05:07

解决方案2 1 2016-08-13 18:36:33

基础

正规则

最后

解决方案1
6 已采纳 2016-08-13 17:05:07

解决方案2
1 2016-08-13 18:36:33