网站
引入
链接是网页里最常见的可交互元素之一。
如果不单独设置链接样式，用户有时候不容易分清它现在是未访问、已访问，还是鼠标移上去、键盘选中、正在点击的状态，所以 CSS 需要专门处理这些状态。
正文
定义
CSS 链接样式，主要是指给
<a>元素的不同状态设置不同的显示效果。
这些状态通常通过伪类来表示，比如:link、:visited、:hover、:focus、:active。
可以把它理解成：同一个链接，在不同操作阶段看起来可以不一样。
这样做的目的，是让用户更清楚自己能点哪里、点过没有、当前操作到了哪里。
常见状态
| 伪类 | 作用 |
|---|---|
:link | 选中未访问过的链接 |
:visited | 选中已访问过的链接 |
:hover | 选中鼠标移上去时的链接 |
:focus | 选中获得焦点的链接，常见于键盘 Tab 操作 |
:active | 选中鼠标按下去但还没松开时的链接 |
语法
最常见的写法就是直接给 <a> 元素加状态样式。
a:link {
color: #2563eb;
}
a:visited {
color: #7c3aed;
}
a:hover {
color: #1d4ed8;
}
a:focus {
outline: 2px solid #2563eb;
}
a:active {
color: #dc2626;
}这里的 a 是选择器，用于选中页面中的某些元素。
:hover、:focus 这些伪类，用于选中元素的某种状态。
基础例子
先准备一个简单链接：
<a href="https://developer.mozilla.org/">查看 MDN 文档</a>再给它设置样式：
a {
color: #2563eb;
text-decoration: underline;
}
a:hover {
color: #1d4ed8;
}这个例子的效果是：
- 平时链接是蓝色
- 鼠标移到链接上时，颜色会变深
- 用户更容易意识到“这里可以点击”
示例：区分未访问和已访问链接
a:link {
color: #2563eb;
}
a:visited {
color: #6d28d9;
}这个写法适合文章列表、文档导航、资料页。
用户看一眼就能知道哪些链接已经点过了。
示例：鼠标悬停时增强提示
a {
text-decoration: none;
color: #2563eb;
}
a:hover {
text-decoration: underline;
}这个例子是平时不显示下划线，鼠标移上去后再显示下划线。
常用于想让页面更简洁，但又不想完全失去链接提示的时候。
示例：补充键盘焦点样式
a:focus {
outline: 2px solid #2563eb;
outline-offset: 2px;
}这个例子主要是给键盘操作用户看的。
当用户用 Tab 切换到链接时，页面会出现明显的焦点框，更容易知道当前选中了哪个链接。
示例：同时处理 :hover 和 :focus
a:hover,
a:focus {
color: #1d4ed8;
text-decoration: underline;
}这个写法很常见。
因为不是所有用户都用鼠标，有些用户会用键盘操作页面，所以不能只写 :hover，也要考虑 :focus。
常见可设置的属性
| 属性 | 作用 |
|---|---|
color | 设置链接文字颜色 |
text-decoration | 设置下划线、删除线等文本装饰 |
background-color | 设置链接背景色 |
outline | 设置获得焦点时的外轮廓 |
outline-offset | 设置外轮廓和元素之间的距离 |
font-weight | 设置文字粗细 |
cursor | 设置鼠标移上去时的指针样式 |
使用顺序
多个链接伪类一起写时，通常会注意顺序问题。
常见顺序是：
:link:visited:hover:focus:active
示例：
a:link {
color: #2563eb;
}
a:visited {
color: #7c3aed;
}
a:hover {
color: #1d4ed8;
}
a:focus {
outline: 2px solid #2563eb;
}
a:active {
color: #dc2626;
}这样写更清楚，也更不容易把状态样式覆盖乱掉。
特点
- 链接样式本质上是在处理
<a>元素的不同状态 :hover用于鼠标移上去时的效果:focus用于键盘或辅助工具选中时的效果:visited可以区分链接是否访问过:active表示用户正在点击这个链接- 链接样式会受到层叠、继承、优先级影响
- 如果去掉链接默认下划线，最好提供其他明显提示
- 只写
:hover不够，还要考虑:focus，这样更符合可访问性
注意事项
:visited能设置的样式有限，浏览器会做一些限制，主要是为了保护用户隐私- 不要把普通文字和链接写得一模一样，不然用户不容易看出来哪里能点
- 去掉
outline之前要先想好替代方案，不然键盘用户会失去焦点提示 a:focus和a:hover经常要一起考虑- 如果链接像按钮一样使用，也要注意点击区域不能太小
- 不建议为了“好看”把所有链接状态都做得差不多，状态变化明显一点更实用
引出
理解了链接的几种状态之后，可以继续学习 CSS 伪类，把这种“按状态选中元素”的思路扩展到更多元素上。
如果继续往下学，也可以结合 CSS 可访问性 一起看，会更容易理解为什么 :focus 不能随便省略。
理解
我觉得链接样式可以理解成“给网页里的跳转入口加状态反馈”。
链接不只是蓝色文字，它其实是一个会变化的交互元素。
用户有没有访问过、鼠标有没有移上去、键盘有没有选中、当前是不是正在点击，这些都可以通过 CSS 表现出来。
所以链接样式的重点不只是美化，而是让用户更容易发现链接、理解状态、顺利操作页面。