CSS 链接(link)

链接是网页中最常见的交互元素，默认带有蓝色文字和下划线。CSS 可以彻底改变链接的外观，还能通过伪类区分"未访问、已访问、悬停、点击"四种状态，让用户清楚知道哪些内容可以点击。美化链接是每个页面都绕不开的基础工作。

链接的四种状态

链接相关的四个伪类分别对应不同交互状态：

a:link    { color: blue; }    /* 未访问的链接 */
a:visited { color: purple; }  /* 已访问过的链接 */
a:hover   { color: red; }     /* 鼠标悬停时 */
a:active  { color: orange; }  /* 鼠标按下未松开时 */

<a href="https://example.com">访问示例网站</a>

效果说明：书写顺序建议 link → visited → hover → active，否则 hover 等效果可能被前面的规则覆盖。

去掉下划线、改颜色

text-decoration: none 去掉默认下划线，再自定义颜色：

a { color: #1a73e8; text-decoration: none; }
a:hover { text-decoration: underline; }

效果说明：平时简洁无下划线，悬停时出现下划线，给出"可点击"的反馈。

按钮式链接

给链接加背景色、内边距与圆角，行内元素立刻"变身"为按钮：

a.btn {
    text-decoration: none;
    background-color: #4caf50;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
}
a.btn:hover { background-color: #45a049; }

<a class="btn" href="#">开始学习</a>

效果说明：绿色背景白色文字的链接看起来像一个按钮，悬停时颜色加深，交互感更强。

让整块区域可点击

把 display 改为块级并加内边距，链接整块区域都能点击：

a.block-link {
    display: block;   /* 变成块级，撑满容器宽度 */
    padding: 10px;
    background: #eee;
    text-decoration: none;
}

效果说明：display: block 后链接宽度铺满容器，点击区域变大，是移动端导航的常用做法。

易错点

• :hover 必须写在 :link 和 :visited 之后，否则悬停样式不生效。
• :active 要写在 :hover 之后，保证按下瞬间的样式正确。
• 去掉下划线用 text-decoration: none，注意同时考虑普通与悬停状态下的可读性。
• 链接默认是行内元素，想控制宽高或做成按钮记得修改 display。

小结

链接样式主要靠四种伪类加上颜色、下划线实现：link 与 visited 区分访问状态，hover 提供悬停反馈，active 响应按下瞬间。记住伪类书写顺序，就能做出清晰美观、交互友好的链接。