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

Question

我刚刚发现了这个：

  

注意：a：hover必须在a：link和a：CSS中访问   定义为了有效!!

     

注意：a：主动必须在a之后按顺序悬停在CSS定义中   要有效!!

     

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

这是否意味着 INCORRECT ？

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

Answer 1

每当有疑问时，请转到specs。这里是规格的摘录。

  

请注意，A：hover必须放在A：链接和A：访问后   规则，因为否则级联规则将隐藏'颜色'   A：悬停规则

的属性

你拥有的是正确的

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不起作用的原因。

Answer 2

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

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

真正的顺序如下：

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

以下是little reassurance。

Answer 3

来自CSS 2.1 specification on dynamic pseudo selectors：

  

请注意，A：hover必须放在A：链接和A：访问规则之后，否则级联规则将隐藏A：hover规则的'color'属性。同样，因为A：active放在A：hover之后，当用户激活并悬停在A元素上时，将应用活动颜色（lime）。

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