CSS3中为何需用.navbar a:hover实现导航栏链接hover效果？

嘿，我来给你把这个事儿说透～

首先得搞懂这两个CSS选择器的作用对象完全不一样：

• 先说.navbar:hover：这个选择器是当鼠标悬停在整个.navbar容器（也就是你写的那个<div class="navbar">）上时，给这个div本身应用样式。举个例子，如果你用这个选择器写背景色，那只要鼠标碰到div的任何区域（包括链接之间的空白处），整个导航栏的div都会变成灰色，而不是单个链接变色——这显然不是你想要的导航栏悬停效果对吧？

• 再看.navbar a:hover：这个选择器的意思是，当鼠标悬停在.navbar容器里的某个<a>标签上时，给这个特定的<a>标签应用样式。这样就实现了鼠标放到哪个链接上，哪个链接就变背景色和文字色的效果，完全符合导航栏的交互需求。

要是你还是有点懵，咱结合你的代码来对比下：

你的HTML结构是这样的：

<div class="navbar">
 <a href="#">Home</a>
 <a href="#">About</a>
 <a href="#">History</a>
 <a href="#" class="right">Link</a>
</div>

如果用.navbar:hover写样式：

.navbar:hover{
 background-color:#ddd;
 color:black;
}

那当你鼠标移到导航栏的空白处（比如Home和About之间），整个div都会变灰；而用.navbar a:hover的话，只有鼠标精准放在某个<a>标签上时，那个链接才会变色，这才是正常的导航栏交互。

另外补充一句：如果你想实现“鼠标悬停在导航栏容器上时，所有链接都变样式”，那可以写.navbar:hover a，但这和你要的单个链接悬停效果完全是两回事儿～

内容的提问来源于stack exchange，提问作者kristokal17