创建导航栏,其中每个链接具有不同的悬停颜色

Question

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

我认为它与为每个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;
}

非常感谢!

Answer 1

你正在做的是在正确的轨道上,但不要一遍又一遍地重复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和#link2 a:hover.它更像是一种风格选择,但它有助于保持代码清洁.