html - 在css中为一个div添加多个样式

Question

我现在有点卡住了。我正在尝试为我的第一个站点创建一个导航栏。

在我的html正文中

<div id="navbar">
    <ul> 
        <li><a href="index.html">Home</a></li> 
        <li><a href="Gallery.html">Gallery</a></li> 
        <li><a href="Contact.html">Contact</a></li> 
    </ul> 
</div>

现在我的CSS是

#navbar {
margin: 0 auto;
text-align: center;

不过我还想补充

a:hover,a:active { 
background-color:#7A8B8B; 

当前应用于页面上的任何链接，而不仅仅是导航栏中的链接。我该如何将悬停链接样式仅应用于 #navbar。

谢谢!

Answer 1

尝试...

#navbar a:hover,#navbar a:active { 
  background-color:#7A8B8B;
}

这意味着将这些样式应用于 id 为 navbar 的元素中包含的 a 标签

fiddle