<!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>
我期待的是什么
我得到的
问题：
>为什么在.foo中定义的颜色是：link,.foo a：visited
选择器覆盖a：hover,a：active？这是怎么回事？
>我明白,我可以解决它,并得到我期望的取消注释
已注释的代码.但是,我想知道我们如何纠正
.foo a：link,.foo a：访问的选择器,使它不
覆盖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定义的样式覆盖a：hover的样式,当链接以及hover伪类适用于类foo的A元素时.
类似地,为.foo a：visited定义的样式覆盖a：hover的样式,当访问以及hover伪类适用于类foo的A元素时.
解决方法
那么,在spec中有一个注释,当使用所有这些规则的多个规则应用于同一个元素时,如何处理链接和动态伪类,这就解释了为什么需要按照这个顺序设置链接选择器：
Note that the A:hover must be placed after the A:link and A:visited rules,since otherwise the cascading rules will hide the ‘color’ property of the A:hover rule. Similarly,because A:active is placed after A:hover,the active color (lime) will apply when the user both activates and hovers over the A element.
无论如何,我想要做的一点是,所有四个伪类,伪类,具有相同的特异性.关于特定性的一切都适用.在这种情况下,在一堆同样具体的选择器中,应用最后一个规则.每个伪类的触发时间或方式都不相关.
现在,.foo选择器的简单介绍使您的第二组链接/访问规则覆盖您的第一组链接/访问样式和悬停/活动样式,强制该类中的元素中的链接始终显示为绿色,直到添加悬浮/活动风格与.foo选择器.
对不起,如果我的回答似乎是缝合或滑倒,我现在在我的iPhone上打字,这很难想到这里…
