正确的方法是什么？ CSS 链接伪类答案

【问题标题】：What is the correct way? CSS Link Pseudo-Class正确的方法是什么？ CSS 链接伪类
【发布时间】：2011-11-16 22:27:43
【问题描述】：

我刚刚发现了这个：

注意：a:hover 必须在 CSS 中的 a:link 和 a:visited 之后定义才能有效！！

注意：a:active 必须在 CSS 定义中按顺序出现在 a:hover 之后要有效！！

注意：伪类名不区分大小写。

这是否意味着这是不正确？

a:link, a:visited, a:active {
color: #006699;
text-decoration: none;
}

a:hover {
color: #2089CC;
text-decoration: underline;
}

不幸的是来源是： http://www.w3schools.com/css/css_pseudo_classes.asp

如果你不知道为什么“悲伤”，请访问http://w3fools.com

【问题讨论】：

【解决方案1】：

如有疑问，请联系specs。这是规格的摘录。

注意 A:hover 必须放在 A:link 和 A:visited 之后规则，否则级联规则将隐藏“颜色” A:hover 规则的属性

你所拥有的是正确的

a:link, a:visited, a:active {
   color: #006699;
   text-decoration: none;
}

a:hover {
   color: #2089CC;
   text-decoration: underline;
}

这就是this 起作用的原因。

以下内容不正确。

a:hover {
   color: #2089CC;
   text-decoration: underline;
}

a:link, a:visited, a:active {
   color: #006699;
   text-decoration: none;
}

这就是this 不起作用的原因。

【讨论】：

只是一个小问题，是{...}; a:hover {...};, 和 a:link, a:visited, a:active{...}; 一样a:悬停 {...};?
写a:link, a:visited, a:active不是多余的吗？ a:link, a:visited 不够吗？

【解决方案2】：

您建议的为每个伪类包含样式的方法不允许每个伪类覆盖最后一个。当您像这样组合样式时，它们会简单地作为一个组一起应用。

例如，:active 伪类位于最后，因此它会覆盖之前的 :focus 或 :hover 伪类。如果您认为链接在单击时变为活动状态并且您希望在用户仍将光标悬停在链接上时应用新样式，则这是有道理的。

真正的顺序如下：

a:link {
  ⋮ declarations
}
a:visited {
  ⋮ declarations
}
a:focus {
  ⋮ declarations
}
a:hover {
  ⋮ declarations
}
a:active {
  ⋮ declarations
}

【讨论】：

【解决方案3】：

来自CSS 2.1 specification on dynamic pseudo selectors：

注意 A:hover 必须放在 A:link 和 A:visited 规则之后，否则级联规则将隐藏 A:hover 规则的 'color' 属性。同样，因为 A:active 放置在 A:hover 之后，所以当用户激活并将鼠标悬停在 A 元素上时，将应用活动颜色（石灰）。

有趣的是，current CSS3 draft specification 似乎没有提到这一点（或者至少没有那么清楚）。

【讨论】：