css伪类:link与:visited链接样式区别

:link 用于设置未访问链接的样式,:visited 用于已访问链接,两者针对不同状态;示例中 :link 设蓝色,:visited 设紫色;因隐私限制,:visited 可修改属性较少;建议按 LVHA 顺序书写伪类以确保正确生效。

在CSS中,:link:visited 是用于设置超链接不同状态样式的伪类,它们的区别主要在于所针对的链接状态不同。

1. :link 伪类 —— 未访问的链接

:link 用于选择用户尚未点击或访问过的链接。

  • 只作用于 这类有目标地址的链接
  • 即使页面刷新,只要用户没点过,就仍会应用 :link 样式
  • 常用于设置链接的默认颜色、下划线等基础样式
示例:
a:link {
  color: blue;
  text-decoration: underline;
}

2. :visited 伪类 —— 已访问的链接

:visited 用于选择用户曾经点击并访问过的链接。

  • 一旦用户打开过该链接(浏览器记录了访问历史),就会触发此状态
  • 出于隐私保护,现代浏览器限制了 :visited 可修改的CSS属性
  • 可设置的颜色仅限于 color、background-color 等少数几个属性
示例:
a:visited {
  color: purple;
}

3. 使用建议与注意事项

为了确保样式正确生效,推荐按以下顺序书写链接相关的伪类(LVHA原则):

  • :link —— 未访问
  • :visited —— 已访问
  • :hover —— 鼠标悬停
  • :active —— 正在点击

这样可以避免样式被覆盖,保证交互效果正常显示。

基本上就这些。掌握 :link 和 :visited 的区别,有助于更好地管理网站中链接的视觉反馈。