CSS link伪类为何不匹配无href的a标签

你是否曾遇到这样的情况：为 a 标签添加了 :link { color: red; }，但页面上某些 a 标签却始终不显示红色，无论怎么调试都不起作用？你或许认为所有 a 标签都应该匹配 :link，对吧？这一现象实际上隐藏着一个关键知识点：:link 伪类究竟作用于哪些元素。

:link 伪类的本质：只认有 href 的 a 标签

:link 伪类的本质是“未被访问的超链接”，而非“所有 a 标签”。浏览器的处理逻辑非常明确：只有包含非空 href 属性的 a 元素，才会被视为超链接，从而有可能匹配 :link。没有 href 的 a 标签，即使写成 文本，在样式引擎眼中也只是普通的内联元素，与 span 无异。换句话说，缺乏 href 属性的 a 标签仅仅是占位符，而非真正的链接。

常见误用场景与错误现象

当你写了 a:link { color: red; } 却发现某些 a 标签没有变红时，通常是由以下几种情况导致的：

• href 值为空字符串：点击 —— 此时不是有效链接，:link 不会生效
• href 仅包含空格：点击 —— 浏览器会将其修剪为空，同样不匹配
• 用 a 做锚点跳转但漏写 href：章节一 —— 这不是链接，只是标记，:link 完全不关注
• 混淆 :link 与通用 a 选择器：a { color: blue; } 才能影响所有 a 标签，而 :link 仅作用于其中一部分

替代方案：何时该用 a 而不是 :link？

如果你需要统一设置所有 a 标签的基础样式（如移除下划线、调整字体大小），直接使用 a 选择器即可；:link 的适用范围非常狭窄：它仅用于区分“未访问链接”与其他状态。在实际项目中，a:link 很少单独使用，更多的是作为 LVHA 链式规则的一部分：

a:link { color: #007bff; }a:visited { color: #6c757d; }a:hover { color: #0056b3; }a:active { color: #004080; }

注意顺序不能乱，否则当 :hover 位于 :link 之前时，未访问链接的悬停效果会失效。

隐私限制让 :link 更“挑”

即使 href 属性正确，:link 也会受到浏览器对链接状态隐私保护机制的限制。例如，为 a:link 设置 font-weight: bold 可能生效；但一旦用户访问过该链接，:visited 状态便会接管，而 :visited 禁止影响布局——因此 font-weight 在已访问状态下会被静默忽略。这意味着，依赖 :link 控制的样式，在用户交互后可能“消失”，这并非浏览器 bug，而是有意设计。