必须用 :link 选择器设置未访问链接样式,它仅匹配含 href 且未被访问的链接,与 :visited 互斥;需遵循 LVHA 顺序,且仅支持 color、text-decoration 等非隐私敏感属性。

未访问链接必须用 :link,不能只写 a
直接给 a 标签写样式,会同时影响所有状态(已访问、悬停、点击中、激活后),无法单独控制“从未点过”的链接。浏览器对链接状态有严格区分:只有 :link 专指 href 存在且尚未被用户访问过的链接。它和 :visited 是互斥的——同一个链接,要么匹配 :link,要么匹配 :visited,不会同时生效。
:link 必须配合 href 属性才起作用
没有 href 的 <a> 标签(比如仅作锚点或 JS 触发的空链接)不会触发 :link。即使写了 href="#" 或 href="javascript:void(0)",部分浏览器也可能不视为“可访问链接”,导致样式不应用。
- ✅ 正确:
<a href="/about">关于</a>→ 匹配:link - ❌ 无效:
<a>关于</a>(无href)→ 不匹配:link - ⚠️ 不稳定:
<a href="#">回到顶部</a>→ 某些浏览器可能跳过:link
顺序很重要::link 和 :visited 要放在 :hover 和 :active 前面
CSS 伪类的层叠顺序(LVHA)必须遵守,否则 :hover 可能覆盖掉 :link 的颜色等声明。浏览器按声明顺序应用规则,后写的会覆盖前面同名属性。
a:link {
color: #0066cc;
}
a:visited {
color: #666;
}
a:hover {
color: #003366;
}
a:active {
color: #ff6600;
}
如果把 a:hover 放在 a:link 前面,且两者都设了 color,那么悬停时虽然匹配 :hover,但一旦鼠标移开,:link 的颜色可能因顺序靠后而没生效——因为实际生效的是最后一条匹配规则。
立即学习“前端免费学习笔记(深入)”;
:link 无法设置某些隐私敏感样式
出于安全限制,现代浏览器禁止通过 :visited(以及间接影响它的 :link)读取或设置以下 CSS 属性:背景图、background-color、border-color、outline-color、color 以外的文本相关属性(如 font-size、visibility)。这意味着你只能安全地用 :link 控制 color、text-decoration、cursor 等非泄露性样式。
真正容易被忽略的是:哪怕只是想让未访问链接加个下划线、已访问的去掉,也得明确写 a:link { text-decoration: underline; } 和 a:visited { text-decoration: none; }——只写其中一条,另一条会回退到浏览器默认(通常是带下划线),而不是“保持不变”。










