网页中的链接在不同交互阶段会呈现不同状态，合理设置样式能显著提升用户体验。本文通过四个CSS伪类选择器分别控制未访问、已访问、悬停和点击时的链接外观，并说明书写顺序规则，帮助开发者快速实现稳定可预期的链接样式。
CSS链接伪类选择器概述
链接是网页导航的核心元素，浏览器默认会为链接提供基础样式：未访问链接为带下划线的蓝色文本，已访问链接为带下划线的紫色文本，点击瞬间显示为红色文本，而鼠标悬停时通常保持原状态颜色不变。若需自定义链接在不同交互阶段的外观，可通过以下四个CSS伪类选择器实现：
:link：定义普通或未访问链接的样式:visited：定义已访问链接的样式:hover：定义鼠标悬停或经过链接时的样式:active：定义鼠标点击链接瞬间的样式
使用这些伪类选择器，可以像设置普通文本一样为链接配置颜色、字体、背景、边框等任意CSS属性。
四种链接状态样式设置方法
未访问链接样式（:link）
通过:link可设置链接首次展示时的外观。以下示例移除了默认下划线，并为链接添加边框、内边距和背景色：
这是一个链接
这是另一个链接
运行后，链接将以灰色背景、黑色边框和18px字号显示，无下划线。
已访问链接样式（:visited）
用户点击并访问过链接后，浏览器会应用:visited样式。示例中为已访问链接设置黄色背景与红色文字：
这是一个链接
这是另一个链接
访问后链接背景变为#FFFF99，文字与边框转为红色。
鼠标悬停样式（:hover）
当鼠标指针移至链接上方时，:hover生效。示例中悬停时背景变为紫色，文字恢复黑色：
这是一个链接
这是另一个链接
悬停时链接背景切换为#9c6ae1，提供明确的交互反馈。
点击瞬间样式（:active）
鼠标按下链接的瞬间，:active样式生效。示例中点击时背景变为黑色，文字变为白色：
这是一个链接
这是另一个链接
点击瞬间链接呈现黑底白字效果，增强操作确认感。
伪类书写顺序规则与注意事项
在CSS中定义这四个伪类时，必须遵循特定顺序，否则样式可能被覆盖。正确顺序为：:link → :visited → :hover → :active。即:hover必须写在:link和:visited之后，而:active必须写在:hover之后。
该顺序源于CSS层叠规则：后定义的样式优先级更高。若顺序颠倒，例如将:hover写在:link之前，则悬停样式可能被未访问样式覆盖，导致交互反馈失效。遵循此顺序可确保各状态样式按预期生效。
