大佬教程收集整理的这篇文章主要介绍了为什么.foo a：link,.foo a：visited {}选择器覆盖a：hover,a：active {}在CSS中的选择器？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<!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中有一个注释,当使用所有这些规则的多个规则应用于同一个元素时,如何处理链接和动态伪类,这就解释了为什么需要按照这个顺序设置链接选择器：
无论如何,我想要做的一点是,所有四个伪类,伪类,具有相同的特异性.关于特定性的一切都适用.在这种情况下,在一堆同样具体的选择器中,应用最后一个规则.每个伪类的触发时间或方式都不相关.
现在,.foo选择器的简单介绍使您的第二组链接/访问规则覆盖您的第一组链接/访问样式和悬停/活动样式,强制该类中的元素中的链接始终显示为绿色,直到添加悬浮/活动风格与.foo选择器.
对不起,如果我的回答似乎是缝合或滑倒,我现在在我的iPhone上打字,这很难想到这里…
以上是大佬教程为你收集整理的为什么.foo a：link,.foo a：visited {}选择器覆盖a：hover,a：active {}在CSS中的选择器？全部内容，希望文章能够帮你解决为什么.foo a：link,.foo a：visited {}选择器覆盖a：hover,a：active {}在CSS中的选择器？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。