如何使用CSS伪类 :link 和 :visited 提升网站导航的可访问性？-css教程-PHP中文网

用 :link 和 :visited 区分链接状态是提升导航可访问性的最基础有效手段，但必须遵循 lvha 顺序且仅能通过 color 等有限属性设置已访问样式，因现代浏览器为防历史探测而强制限制 :visited 的样式范围。

如何使用css伪类 :link 和 :visited 提升网站导航的可访问性？

直接给结论：用 :link 和 :visited 区分链接访问状态，是提升导航可访问性的最基础、最有效手段之一；但必须按 LVHA 顺序书写，且不能依赖 :visited 控制非颜色类样式——否则在现代浏览器里根本不会生效。

为什么 :visited 只能改颜色，改了别的也白搭

这不是 bug，是浏览器主动限制。Chrome、Firefox、Safari 都强制只允许 :visited 修改有限的几个属性：color、background-color、border-color、outline-color，以及它们的透明度变体（如 rgba()）。其他任何尝试——比如 font-size、text-decoration、transform、background-image——都会被静默忽略。

这是为了防止网站通过样式探测用户浏览历史（例如：构造一堆隐藏链接，再用 JS 读取 getComputedStyle 判断是否被访问过）。

别写 a:visited { font-weight: bold; } —— 它不生效
别指望 a:visited { background: url(…); } 能显示图片背景
如果用了 filter 或 opacity，也大概率被忽略（不同浏览器行为不一致，应视为不可靠）

:link 和 :visited 必须按 LVHA 顺序写，否则 hover 会失效

LVHA 是 Link → Visited → Hover → Active 的缩写，不是建议，是实际生效的层叠逻辑。CSS 规则后写的会覆盖前面同优先级的规则，而 :hover 和 :active 本身没有更高特异性，所以如果把 :hover 写在 :visited 前面，鼠标悬停时可能仍沿用 :visited 的颜色，导致“悬停没反应”。

✅ 正确顺序：a:link → a:visited → a:hover → a:active
❌ 错误示例：a:hover { color: red; } 放在 a:visited { color: #666; } 前面，悬停时颜色可能卡在灰色
注意：如果用了更具体的选择器（如 nav a:visited），要确保 hover 选择器同样具体，否则优先级可能翻车

可访问性关键点：颜色对比度必须达标

仅靠“蓝色 vs 灰色”不等于可访问。WCAG 2.1 要求普通文本的对比度至少 4.5:1。很多默认的 #666 在白色背景上只有约 3.8:1，对低视力用户几乎无法识别已访问状态。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

推荐用工具检测：WebAIM Contrast Checker 或浏览器 DevTools 的无障碍面板
安全配对示例：a:link { color: #0066cc; }（对比度 7.2:1） + a:visited { color: #5a5a5a; }（对比度 4.7:1）
避免纯灰（#999）、浅紫（#e6e6ff）等弱对比组合
不要只靠颜色区分——可叠加下划线变化（a:link { text-decoration: underline; }，a:visited { text-decoration: none; }），但注意：下划线本身不能用于 :visited 单独控制（部分浏览器允许，但不保证）

导航中真实可用的最小实践模板

下面这段代码能在所有现代浏览器中稳定工作，且满足基本可访问性要求：

a:link {
  color: #0066cc;
  text-decoration: underline;
}
a:visited {
  color: #5a5a5a;
}
a:hover {
  color: #004080;
  text-decoration: underline;
}
a:active {
  color: #002a55;
}

关键细节：