CSS 链接（link）

网页中的超链接（<a>）可以通过 CSS 改变颜色、下划线、背景等。还可以针对「未访问」「已访问」「悬停」「点击时」等不同状态分别设置样式，让链接更清晰、更好看。

链接的四种状态

状态	伪类	说明
未访问	:link	默认、从未点过的链接
已访问	:visited	用户已经访问过的链接
悬停	:hover	鼠标悬停在链接上时
激活	:active	鼠标按下但还未松开时

通过这四种伪类选择器，可以分别给链接写样式。

---

基本写法

/* 未访问：蓝色、有下划线 */
a:link {
  color: blue;
  text-decoration: underline;
}

/* 已访问：紫色、下划线 */
a:visited {
  color: purple;
  text-decoration: underline;
}

/* 悬停：变色、去掉下划线 */
a:hover {
  color: darkblue;
  text-decoration: none;
}

/* 按下瞬间：红色 */
a:active {
  color: red;
}

---

书写顺序建议

若多个状态都写了样式，顺序会影响最终效果（后写的会覆盖先写的同属性）。推荐顺序：

a:link { }
a:visited { }
a:hover { }
a:active { }

可记成：LoVe HAte（link → visited → hover → active）。

---

常见用法示例

1. 去掉默认下划线，悬停时再显示

a:link,
a:visited {
  color: #0066cc;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

2. 按钮式链接（块状、有背景）

a:link,
a:visited {
  display: inline-block;
  padding: 10px 20px;
  background: #0066cc;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}

a:hover {
  background: #0052a3;
}

a:active {
  background: #003d7a;
}

3. 只改颜色，不区分是否访问

若不想区分「未访问 / 已访问」，可以一起写：

a:link,
a:visited {
  color: #333;
}

a:hover {
  color: #0066cc;
}

---

安全与隐私说明（:visited）

浏览器对 :visited 有安全限制：只允许设置颜色相关属性（如 color、background-color 等），且不允许通过 JavaScript 读取已访问链接的样式，防止通过样式推断用户访问记录。所以 :visited 不要用来做复杂布局或背景图，只做颜色类样式即可。

---

小结

• 链接四种状态：:link、:visited、:hover、:active。
• 推荐顺序：link → visited → hover → active（LoVe HAte）。
• 常用：改 color、text-decoration，悬停时改变颜色或下划线；也可做成按钮样式。
• :visited 仅适合设置颜色类属性，避免复杂布局。

下一节学习 CSS 列表：列表项符号、缩进与自定义列表样式。