示例代码：http : //jsfiddle.net/RuQNP/
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<style type="text/css">
a:link, a:visited {
color: blue;
}
a:hover, a:active {
color: red;
}
.foo a:link, .foo a:visited {
color: green;
}
/* A possible fix */
/*
.foo a:hover, .foo a:active {
color: red;
}
*/
</style>
</head>
<body>
<div class="foo">
<a href="http://example.com/">Example</a>
</div>
</body>
</html>
我期待的是：
该链接在悬停时将显示为红色。
我得到的是：
该链接在悬停时显示为绿色。
问题：
为什么在colorin .foo a:link, .foo a:visited 选择器中定义的优先于in a:hover, a:active？这是怎么回事？
我知道我可以修复它，并通过取消注释注释的代码来获得期望的结果。但是，我想知道如何校正 .foo a:link, .foo a:visited选择器，使其不会覆盖colorin中的定义a:hover, a:active？
如果我能正确理解http://www.w3.org/TR/CSS21/cascade.html#specificity（感谢BoltClock），则这是代码中各种选择器的特异性表。
a:link - 0 0 1 1
a:visited - 0 0 1 1
a:hover - 0 0 1 1
a:active - 0 0 1 1
.foo a:link - 0 0 2 1
.foo a:visited - 0 0 2 1
因此，为定义的样式.foo a:link会覆盖伪类和伪类都应用于class的A元素a:hover时的样式。linkhoverfoo
同样，为定义的样式.foo a:visited会覆盖伪类以及伪类都应用于class的A元素a:hover 时的样式。visitedhoverfoo
慕村9548890