为什么CSS :link伪类无法匹配没有href属性的a标签？

a:link只匹配带非空href属性的a标签，用于设置未访问链接样式；无href或href为空时，该伪类不生效，此时a标签被视为普通内联元素。

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

:link 的本质是“未访问的超链接”，不是“所有 a 标签”。浏览器判断依据非常机械：只有 a 元素带非空 href 属性，才会被当作超链接处理，进而可能匹配 :link。没有 href，哪怕写成 <a>文本</a>，它在样式引擎眼里就是普通内联元素，和 span 没区别。

常见误用场景和错误现象

你写了 a:link { color: red; }，但某些 a 标签没变红，大概率是下面几种情况：

• href 值为空字符串：<a href="">点击</a> —— 不算有效链接，:link 不触发
• href 只有空格：<a href=" ">点击</a> —— 浏览器 trim 后视为空，同样不匹配
• 用 a 做锚点跳转但漏写 href：<a id="section1">章节一</a> —— 这不是链接，只是标记，: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，是故意设计。