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

Question

我刚发现这个：

注意：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

score 4 · Accepted Answer

如有疑问，请查看规格。这是规格的摘录。

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

你所拥有的是正确的

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

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

这就是为什么这有效。

下面这将是不正确的。

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

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

这就是为什么这不起作用。

score 3 · Accepted Answer

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

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

真正的顺序如下：

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

这里给你一个小小的安慰。

score 1 · Accepted Answer

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

有趣的是，当前的 CSS3 草案规范似乎没有提到这一点（或者至少没有那么清楚）。

3 回答 3