a:link 单独写没反应是因为它仅匹配从未被当前浏览器访问过的链接,若未定义 a:visited 或顺序错误(未遵循LVHA),浏览器会回退默认样式或被后声明的 a:visited 覆盖;且 :visited 样式受隐私限制,仅允许修改颜色类属性,file:// 协议下也不生效。

a:link 和 a:visited 是唯二能区分未访问与已访问链接的 CSS 伪类,但它们不是“开关”,而是浏览器基于本地访问历史自动匹配的状态;直接写 a:link 不会生效,必须配合 a:visited 并严格按顺序书写。
为什么 a:link 单独写没反应?
常见错误是只定义 a:link { color: red; },结果所有链接(包括已访问的)都变红。这是因为:
-
a:link只匹配带href属性且**从未被当前浏览器访问过**的链接,一旦用户点开过,它就不再匹配 - 若没写
a:visited,浏览器会回退到默认样式(通常是紫色),覆盖你的a:link颜色 - 更关键的是:如果
a:visited写在a:link前面,后者会被前者规则“穿透式覆盖”(因选择器权重相同,后声明优先)
必须按 LVHA 顺序写,否则颜色会错乱
LVHA 是 Link → Visited → Hover → Active 的缩写,不是建议,是层叠规则强制要求。例如:
a:link { color: #0066cc; }
a:visited { color: #663399; }
a:hover { color: #ff6600; }
a:active { color: #cc0000; }
如果把 a:visited 放在 a:link 前面,哪怕只差一行,未访问链接也会显示成 a:visited 的颜色——因为两者 specificity 完全一致,后写的生效。
立即学习“前端免费学习笔记(深入)”;
:visited 能改的样式非常有限
现代浏览器(Chrome、Firefox、Safari)为防止通过 CSS 探测用户浏览历史,对 a:visited 可用属性做了硬性限制:
- 允许修改:
color、background-color、border-color、outline-color、column-rule-color - 禁止修改:
font-size、text-decoration、visibility、任何涉及渐变或图片的属性(如background-image) - 特别注意:
rgba(0,0,0,0.5)或transparent会被视为隐私风险,部分浏览器直接忽略
实际调试时容易忽略的一点
本地开发时用 file:// 协议打开 HTML 文件,a:visited 几乎总不生效——因为多数浏览器禁用 file 协议下的访问历史记录。必须用 http:// 或 https://(哪怕只是 localhost:8080)才能触发真实访问状态匹配。这点不试真机环境根本发现不了。


















