未访问链接样式设置方法

本文详解了CSS中为未访问链接（即带href且从未被点击过的a标签）设置样式的正确方法：必须使用`:link`伪类选择器，而非直接写`a`标签样式，以确保精准控制；强调`:link`与`:visited`互斥、仅对含有效href的链接生效，并严格遵循LVHA层叠顺序（:link → :visited → :hover → :active）避免样式覆盖；同时提醒开发者，出于隐私保护，`:link`仅支持有限的安全属性（如color、text-decoration、cursor等），无法设置背景、边框或字体大小等可能泄露浏览历史的样式——任何疏忽都可能导致样式失效或安全限制触发。

未访问链接必须用 :link，不能只写 a

直接给 a 标签写样式，会同时影响所有状态（已访问、悬停、点击中、激活后），无法单独控制“从未点过”的链接。浏览器对链接状态有严格区分：只有 :link 专指 href 存在且尚未被用户访问过的链接。它和 :visited 是互斥的——同一个链接，要么匹配 :link，要么匹配 :visited，不会同时生效。

:link 必须配合 href 属性才起作用

没有 href 的 标签（比如仅作锚点或 JS 触发的空链接）不会触发 :link。即使写了 href="#" 或 href="javascript:void(0)"，部分浏览器也可能不视为“可访问链接”，导致样式不应用。

• ✅ 正确：关于 → 匹配 :link
• ❌ 无效：关于（无 href）→ 不匹配 :link
• ⚠️ 不稳定：回到顶部 → 某些浏览器可能跳过 :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; }——只写其中一条，另一条会回退到浏览器默认（通常是带下划线），而不是“保持不变”。

好了，本文到此结束，带大家了解了《未访问链接样式设置方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！