CSS中的链接顺序

Question

如何正确地为<a>元素（链接、访问过的链接、悬停、激活）设置样式顺序？这些都令人困惑，因为提供了不同的组合，比如LVHA，LAHV。有人能指定正确的顺序吗？

- ArK

Answer 1

从CSS规范中引用：伪类：

a:link    { color: red }    /* unvisited links */
a:visited { color: blue }   /* visited links   */
a:hover   { color: yellow } /* user hovers     */
a:active  { color: lime }   /* active links    */

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

- Daniel A. White

---

当一个链接被访问后，它会变成已访问的颜色。为什么会发生这种情况？ - ArK

你曾经访问过这些链接指向的页面吗？可能是几个月前的事了。你可以尝试编造一些从未访问过的链接来测试未访问的链接。在开发网站时，我注意到你通常会访问所有出现的链接。 - Joey

我解决了问题。我的链接都指向同一页 (#)。无论如何，感谢您的帖子。 - ArK

Answer 2

你可能也喜欢VLHA排序，这没有任何区别。然而CSS规范指定了LVHA排序，实际上这个排序方式很容易记忆：i LoVeHA!

- Özgür

---

尝试一下，LoVe/HAte，这是从《Pro CSS Techniques》中复制的。 - Alan Dong

Answer 3

这是最佳顺序，特别适用于伪类。 A L V VH H A（我发音为Al'va ha'）

a              { color: white; text-decoration: none; }                 /* bookmark */
a:link         { color: red; }                                          /* regular link */
a:visited      { color: green; text-decoration: strikethrough; }        /* visited link */
a:visited:hover { color: blue; text-decoration: underline overline; }    /* visted hover link */
a:hover        { color: yellow; text-decoration: underline overline; }  /* hover link */
a:active       { color: orange; text-decoration: underline overline; }  /* active link */

这将保持访问状态和悬停状态，并保持指定顺序。它还允许样式化书签，例如：

<a name="bookmark_name">Bookmark Text</a>

你可以使用

标签来定位它。

<a href="bookmark_name">Link Text</a>

我发现这对于链接到网站的某个部分非常有用，但是你可能不想让书签具有自动悬停样式，因为它是一个锚标签。

- Harry The Mad Lurker