CSS: Anchor styles [The right way to do it]

最新推荐文章于 2025-02-26 09:24:10 发布

原创最新推荐文章于 2025-02-26 09:24:10 发布 · 987 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#styles #css

本文介绍如何正确地定义及覆盖CSS中的锚点样式，包括使用伪类如:link, :visited, :hover和:active等来实现不同状态下的链接效果。同时展示了通过类名区分不同链接样式的技巧。

Below is a small CSS tip of how to define and override anchor styles correctly. This example demonstrates the use of the pseudo-classes. Most common anchor pseudo-classes are:

link
visited
hover
active

Define and override anchor styles:

  
    a:link              { color:red; text-decoration:underline; }
    a:visited           { color:red; text-decoration:underline; }
    a:hover             { color:green; text-decoration:underline; }
    a:active            { color:red; text-decoration:underline; }

    a.otherLink:link    { color:red; text-decoration:none; }
    a.otherLink:visited { color:red; text-decoration:none; }
    a.otherLink:hover   { color:green; text-decoration:underline; }
    a.otherLink:active  { color:red; text-decoration:none; }