:visited与:hover的CSS应用详解

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《CSS链接状态：:visited与:hover应用解析》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

现代浏览器为保护隐私严格限制:visited可修改的CSS属性，仅允许color、background-color等少数样式，其他属性被静默忽略；应改用后端状态+class方案实现“已读/未读”效果。

为什么给 :visited 设置颜色没反应

现代浏览器出于隐私保护，严格限制了 :visited 伪类能修改的 CSS 属性。你只能安全地设置：color、background-color、border-color（含各方向）、outline-color，以及部分 text- 和 column- 开头的属性。其他如 font-size、display、transform、visibility 都会被忽略，且不会报错——它就安静地不生效。

这是故意设计的行为，不是 bug。浏览器通过禁止样式差异来防止脚本探测用户历史访问记录。

• 别试图用 :visited 控制布局或触发动画
• 不要在 :visited 中写 transition 或 animation，它们不会运行
• 若发现颜色没变，请先确认链接确实已被访问过（可手动点开再返回），并检查是否被更具体的规则覆盖（比如 a:hover:visited 的优先级高于单独的 :visited）

:hover 和 :visited 的层叠顺序怎么写才可靠

CSS 伪类的声明顺序会影响最终效果，尤其当多个伪类共存时。标准推荐顺序是 :link → :visited → :hover → :active（LVHA），但实际中 :link 和 :visited 互斥（未访问/已访问），真正需要协调的是 :hover 和 :visited 的组合。

如果你想让“已访问链接悬停时显示红色”，必须显式写出 a:visited:hover，而不是依赖 :hover 覆盖 :visited —— 因为两者权重相同，后声明者胜出，但语义上 :visited:hover 更准确且兼容性更好。

a:link { color: #0066cc; }
a:visited { color: #666666; }
a:hover { color: #ff3300; }
a:visited:hover { color: #cc0000; }
a:active { color: #003366; }

• a:hover 不会覆盖 a:visited 的颜色，除非你明确写 a:visited:hover
• 避免写 a:hover:visited —— 语法合法但语义反直觉，部分旧浏览器解析异常
• 移动端无 hover，:hover 在触摸设备上仅对可聚焦元素（如带 tabindex 的 ）偶尔触发，不可依赖

如何检测一个链接是否真被 :visited 匹配到了

<a href="/post/123" class="link-article<%= post.read_at ? ' is-read' : '' %>">标题</a>

.link-article { color: #0066cc; }
.link-article.is-read { color: #999; text-decoration: line-through; }
.link-article:hover { color: #ff3300; }
.link-article.is-read:hover { color: #cc0000; }