为什么 .foo a:link, .foo a:visited {} 选择器会覆盖 CSS 中的 a:hover, a:active {} 选择器? [英] Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS?
问题描述
示例代码: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>
我所期待的:
悬停时链接会显示为红色.
The link would appear red on hover.
我得到了什么:
悬停时链接显示为绿色.
The link appears green on hover.
问题:
- 为什么
.foo a:link, .foo a:visited中定义的color选择器覆盖a:hover, a:active中的选择器?这是怎么回事? - 我知道我可以通过取消注释来修复它并获得我期望的结果注释代码.但是，我想知道我们如何纠正
.foo a:link, .foo a:visited选择器，这样它就不会覆盖a:hover, a:active? 中定义的
color- Why does the
colordefined in.foo a:link, .foo a:visitedselector override the one ina:hover, a:active? What's going on? - I understand that I can fix it and get what I expect by uncommenting
the commented code. However, I want to know how can we correct the
.foo a:link, .foo a:visitedselector such that it does not override thecolordefined ina:hover, a:active?
<小时>
如果我理解 http://www.w3.org/TR/CSS21/cascade.html#特异性 正确(谢谢，BoltClock)，这是代码中各种选择器的特异性表.
If I understand http://www.w3.org/TR/CSS21/cascade.html#specificity properly (Thanks, BoltClock), this is the specificity table for the various selectors in the code.
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
因此，当 link 和 都为 伪类应用于 .foo a:link 定义的样式会覆盖 a:hover 的样式>hoverfoo 类的 A 元素.
So, the style defined for .foo a:link overrides the style for a:hover when both link as well as hover pseudo-classes apply to an A element of class foo.
同样，当 visited 和 时，为 伪类应用于 .foo a:visited 定义的样式会覆盖 a:hover 的样式>hoverfoo 类的 A 元素.
Similarly, the style defined for .foo a:visited overrides the style for a:hover when both visited as well as hover pseudo-classes apply to an A element of class foo.
推荐答案
当你第一次接触 CSS 时，你可能已经了解了 LoVe-HAte 助记符，用于指定链接选择器的顺序(a:link、a:visited、a:hover、a:active).你有没有想过为什么选择这个助记词?
When you first started with CSS, you might have learned about the LoVe-HAte mnemonic for the order in which to specify link selectors (a:link, a:visited, a:hover, a:active). Have you ever wondered why this mnemonic was chosen?
嗯，规范中有一条注释关于如何处理链接和动态伪类，当使用它们的多个规则应用于同一元素时，这解释了为什么需要按该顺序设置链接选择器:
Well, there's a note in the spec on how the link and dynamic pseudo-classes are treated when multiple rules using all of them apply to the same element, which explains why you need to set link selectors in that order:
请注意，A:hover 必须放在 A:link 和 A:visited 规则之后，否则级联规则将隐藏 A:hover 规则的 'color' 属性.同样，因为 A:active 放置在 A:hover 之后，所以当用户激活并将鼠标悬停在 A 元素上时，将应用活动颜色(石灰).
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.
无论如何，我在上面要说明的一点是，所有四个伪类，作为伪类，都具有相同的特异性.其他关于特异性的一切都适用.在这种情况下，在一堆同样特定的选择器中，最后一条规则被应用.每个伪类何时或如何被触发是无关紧要的.
Anyway, the point I'm trying to make above is that all four pseudo-classes, being pseudo-classes, have equal specificity. Everything else about specificity applies. In this case, out of a bunch of equally specific selectors, the last rule is applied. When or how each pseudo-class is triggered is never relevant.
现在，.foo 选择器的简单介绍会导致您的第二组链接/已访问规则覆盖您的第一组链接/已访问样式和悬停/活动样式，强制该类元素中的链接始终显示为绿色，直到您使用 .foo 选择器添加悬停/活动样式.
Now, the simple introduction of the .foo selector causes your second set of link/visited rules to override your first set of link/visited styles and the hover/active styles, forcing links in elements with that class to always appear green until you add hover/active styles with the .foo selector.
很抱歉，如果我的回答看起来有点草率或草率，我现在正在我的 iPhone 上输入这个，在这里很难想出来......
这篇关于为什么 .foo a:link, .foo a:visited {} 选择器会覆盖 CSS 中的 a:hover, a:active {} 选择器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
