CSS 为什么.foo a:link, .foo a:visited {}的选择器会覆盖a:hover, a:active {}选择器

在本文中，我们将介绍为什么CSS中.foo a:link, .foo a:visited {}选择器会覆盖a:hover, a:active {}选择器。这个问题可能会让一些开发者感到困惑，因为根据CSS选择器的优先级规则，应该是后者的权重较高。

首先，我们需要了解一下CSS选择器的优先级规则。CSS选择器根据其特定性和重要性来确定优先级。特定性是指选择器中的标签、类、ID以及伪类等的数量和顺序，重要性是指选择器前面是否有!important标志。

在上述例子中，.foo a:link, .foo a:visited {}选择器的特定性要高于a:hover, a:active {}选择器，因为前者包含了更多的标签和伪类。.foo a:link, .foo a:visited {}选择器首先选择.foo类中的所有链接元素，然后再选择其中的链接状态（a:link和a:visited）。而后者a:hover, a:active {}选择器只针对链接的鼠标悬停状态和点击激活状态。

为了更加直观地理解这个问题，我们来看一个具体的示例。假设有以下HTML代码和两个CSS规则：

HTML代码：

<div class="foo">
  <a href="#"
     target="_blank">This is a link</a>
</div>

CSS规则：

.foo a:link, .foo a:visited {
    color: red;
}

a:hover, a:active {
    color: blue;
}

在这个示例中，.foo a:link, .foo a:visited {}选择器指定了链接在默认状态下的颜色为红色。而a:hover, a:active {}选择器指定了链接在鼠标悬停和点击激活状态下的颜色为蓝色。

根据优先级规则，.foo a:link, .foo a:visited {}选择器的特定性更高，因此它会覆盖a:hover, a:active {}选择器中的颜色设置。换句话说，链接在默认状态下会显示为红色，而在鼠标悬停和点击激活状态下显示为默认的蓝色。

阅读更多：CSS 教程

总结

通过这个例子，我们可以看到，CSS选择器的特定性和重要性对于选择器的优先级起到了至关重要的作用。在.foo a:link, .foo a:visited {}选择器和a:hover, a:active {}选择器的比较中，前者的特定性更高，因此会覆盖后者的样式。在编写CSS样式时，我们需要正确理解和使用选择器的优先级规则，以确保样式能够正确地应用到相应的元素上。