Sus*_*Pal 14 css css-selectors
示例代码: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定义的a:hover, a:active？如果我正确理解http://www.w3.org/TR/CSS21/cascade.html#specificity(Thanks,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两个类link和hover伪类应用于类的A元素foo.
类似地,定义的样式将.foo a:visited覆盖样式,以便a:hover 将两个类visited和hover伪类应用于类的A元素foo.
Bol*_*ock 16
当你第一次开始使用CSS,你可能已经了解了爱恨交织助记符在其中指定链接选择器(顺序a:link,a:visited,a:hover,a:active).你有没有想过为什么选择这个助记符？
好吧,规范中有一个注释,说明当使用所有规则的多个规则应用于同一个元素时如何处理链接和动态伪类,这就解释了为什么需要按顺序设置链接选择器:
请注意,A:hover必须放在A:link和A:visited规则之后,否则级联规则将隐藏A:hover规则的'color'属性.同样,因为A:active位于A:hover之后,当用户激活并悬停在A元素上时,将应用活动颜色(lime).
无论如何,我想说的是,所有四个伪类,即伪类,具有相同的特异性.其他关于特异性的事情也适用.在这种情况下,在一堆同样特定的选择器中,应用最后一条规则.何时或如何触发每个伪类永远不相关.
现在,.foo选择器的简单介绍会导致您的第二组链接/访问规则覆盖您的第一组链接/访问样式和悬停/活动样式,强制使用该类的元素中的链接始终显示为绿色,直到您添加悬停/ .foo选择器的活动样式.
很抱歉,如果我的答案似乎已被缝合或滑倒,我现在正在我的iPhone上输入这个,这里很难想到......