为什么CSS中的.foo a：link，.foo a：visited {}选择器会覆盖a：
示例代码：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
万千封印3回答
-
慕村9548890
当你第一次开始使用CSS，你可能已经了解了爱恨交织助记符在其中指定链接选择器（顺序a:link，a:visited，a:hover，a:active）。您是否曾经想过为什么选择此助记符？好，规范中有一条注释，说明当使用多个规则和动态伪类的所有规则应用于同一个元素时，如何处理它们，这说明了为什么需要按此顺序设置链接选择器：请注意，必须将A：hover放在A：link和A：visited规则之后，否则级联规则将隐藏A：hover规则的'color'属性。同样，由于A：active放置在A：hover之后，因此当用户激活并悬停在A元素上时，将应用活动颜色（石灰）。无论如何，我在上面要说明的一点是，作为伪类的所有四个伪类都具有相同的特异性。关于特异性的其他所有内容都适用。在这种情况下，在一堆同样特定的选择器中，将应用最后一个规则。何时或如何触发每个伪类与之无关。现在，.foo选择器的简单介绍使您的第二组链接/访问规则覆盖了您的第一组链接/访问样式和悬停/活动样式，从而迫使具有该类的元素中的链接始终显示为绿色，直到您添加悬停/ .foo选择器激活样式。抱歉，如果我的答案似乎被缝合或滑了一下，我现在正在iPhone上输入此字，很难在这里思考...
随时随地看视频慕课网APP
Html/CSS