创建一个导航栏，其中每个链接都有不同的悬停颜色

我想为我的网站制作一个黑色导航栏，当您将鼠标悬停在第一个链接上时，它会变成橙色，第二个链接会变成绿色，等等。我知道如何在悬停时更改颜色，但不知道如何让每个链接都不同。

我认为这与为每个 li 标签提供 id 有关吗？

<div id="navbar"> 
<ul> 
    <li id="link1"><a href="1.html">1</a></li>
    <li id="link2"><a href="2.html">2</a></li>
    <li id="link3"><a href="3.html">3</a></li> 
</ul> 
</div>

但是如何在 css 文件中为每个 id 创建不同的样式呢？ 以下是我尝试过的

#navbar ul li a { 
    text-decoration: none; 
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 30px;
    padding-right: 30px;
    color: #ffffff; 
    background-color: #000000; 
}


#navbar ul li #link1 a:hover { 
    color: #ffffff; 
    background-color: #C62222; 
    padding-top:15px;
    padding-bottom:15px;
}

#navbar ul li #link2 a:hover { 
    color: #ffffff; 
    background-color: #28C622; 
    padding-top:15px;
    padding-bottom:15px;
}

非常感谢帮助！

你正在做的事情是正确的，但不要一遍又一遍地重复CSS：

#navbar ul li a:hover { 
    color: #ffffff; 
    padding-top:15px;
    padding-bottom:15px;
}

#navbar ul #link1 a:hover { 
    background-color: #C62222; 
}

#navbar ul #link2 a:hover { 
    background-color: #28C622; 
}

正如其他人所指出的，您还需要删除li和你的 ID，或者只是删除li完全（因为只有一个link1，您不一定需要告诉浏览器它是一个li).

此外，如果您愿意，您可以（并且可能应该）将这些选择器简单化为#link1 a:hover and #link2 a:hover。它更多的是一种风格选择，但它有助于保持代码整洁。