示例代码: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>
我期待的是:
悬停时链接显示为红色.
我得到了什么:
悬停时链接显示为绿色.
问题:
color定义的.foo a:link, .foo a:visited
选择器覆盖了a:hover, a:active？这是怎么回事？ .foo a:link, .foo a:visited选择器,使其不会覆盖color定义的 …