css - 为什么悬停对一个链接有效但对另一个链接无效？

Question

我的标题中有两个来自“menu_top”类的链接，因此:

<a class="menu_top" href="adverteerders.html"  >adverteerders</a>
<a class="menu_top" href="ondernemers.html"  >ondernemers</a>

对应的css代码为:

.menu_top {
    font-size: 14px; 
}
.menu_top:link {color: #404040;}
.menu_top:hover {color: #CC0033;}
.menu_top:visited {color: #404040;}

当我执行此代码并将鼠标悬停在“adverteerders”上时，颜色不会改变。当我将鼠标悬停在“ondernemers”上时，奇怪的是它确实发生了变化。所以我所做的是复制了 ondernemers 的确切代码，然后它似乎再次起作用了。现在，当我将 'ondernemers' 重写为 'adverteerders' 时，它们就不再起作用了。但是，当我键入 oadverteerders.html 时，悬停会起作用。

这到底是怎么回事？

Answer 1

CSS 选择器的顺序很重要。当一个元素匹配多个具有相同特异性的 CSS 选择器时，后面定义的选择器会覆盖前面的选择器。

所以如果你在 :hover 伪类之后使用 :visited 伪类，那么 :visited 样式将优先于 :hover 样式，在它们冲突的地方覆盖它们。

这就是为什么您通常希望在 :visited 之后定义 :hover 和 :active 样式。