Html 是否更改单个列表项的背景？

因此，我正在建立一个网页目前，作为一个要求，每个菜单必须有一个不同的颜色。但是我在弄清楚我是如何针对单个列表项的时候遇到了困难

结构如下：

<nav>
    <ul>
        <li>red</li>
        <li>blue</li>
        <li>orange</li>
        <li>yellow</li>
        <li>green</li>
    </ul>
</nav>

这些项目有一些填充和边界半径，但我不知道如何给不同的项目不同的背景颜色最简单的方法

请帮帮我

提前感谢。

要设置第n项的样式，请使用以下CSS：

li:nth-child(2) {
  background-color: #f00; /* Whatever you want */
}

---

查看typen的：n和：n childn部分

如果它是固定的，那么您可以使用第n个子选择器实现如下效果

ul.test li:nth-child(1)
{
 background:red;
}
ul.test li:nth-child(2)
{
 background:blue;
}
ul.test li:nth-child(3)
{
  background:orange;
}
ul.test li:nth-child(4)
{
  background:yellow;
}
ul.test li:nth-child(5)
{
background:green;
}

---

我认为一个更好的解决方案可能是避免在中使用，然后直接使用样式锚链接。您可以避免将链接项的样式分散在多个样式选择器ul、li、a上，并且标记更加清晰

<nav>
    <a href="home.html">Home</a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
    <a href="whatever.html">Whatever</a>
</nav>

CSS也很短，语义清晰，易于理解，无需猜测：

nav > a {
    display: inline-block;   /* or block, depending on design */
    vertical-align: top;
    padding: 20px;           /* here rather than in <li> */
    margin: 10px;            /* here rather than in <li> */
    border-radius: 5px;      /* here rather than in <li> */
    color: white;
    text-decoration: none;   /* remove default underline */
}
nav > a[href="home.html"] {
    background-color: red;
}
nav > a[href="about.html"] {
    background-color: green;
}
nav > a[href="contact.html"] {
    background-color: blue;
}
nav > a[href="whatever.html"] {
    background-color: violet;
}

---

就我个人而言，我认为这比使用第n个子项要好，特别是如果以后在其他导航项之间添加导航项。尽管第n个孩子可以工作，但还不完全清楚哪个背景是为哪个链接控制的。

Thomas，你想让你的每个孩子都有不同的颜色吗？@KheemaPandey不是吗？Sass对问这种问题的人来说有点难吗？无意冒犯Thomas@Aaron我的假设是，SASS将比使用第n个child更有益。@Thomas，如果您有一组确定的链接，并且希望为每个项目指定不同的颜色，那么您可以使用一个简单的CSS标记。检查这个：@Thomas检查这个例子。这仍然是一个有限的解决方案，如果OP有更多的链接怎么办；仅限于CSS限制，他被限制为：第一个孩子，：最后一个孩子，：n个孩子，：n个最后一个孩子，：n个类型和：n个类型的最后一个；所有这些都是荒谬的限制。这个答案可能是OP问题的解决方案