17370845950

如何通过css选择link与visited链接
:link 设置未访问链接样式,:visited 设置已访问链接样式,二者常配合使用以区分链接状态,如 a:link{color:blue} 与 a:visited{color:purple},需注意定义顺序避免覆盖,且 :visited 受浏览器隐私限制仅可修改部分颜色属性。

在CSS中,可以通过伪类来选择和样式化不同状态的链接。对于超链接(a 元素),常用的两个伪类是 :link:visited,它们分别代表未访问和已访问的链接。

:link 伪类 — 设置未访问链接的样式

使用 :link 可以为所有尚未被用户点击过的链接设置样式。

例如:
  • a:link { color: blue; } — 将未访问链接设为蓝色
  • 这个样式只对带有 href 属性且未被访问过的链接生效
  • 如果链接已被访问,则此规则不再起作用

:visited 伪类 — 设置已访问链接的样式

:visited 用于定义用户已经点击访问过的链接外观。

例如:
  • a:visited { color: purple; } — 已访问链接显示为紫色
  • 出于隐私保护原因,浏览器限制了 :visited 可修改的CSS属性
  • 允许修改的颜色相关属性包括 color、background-color、border-color 等,但不能获取背景图或字体信息

常见用法组合

通常将 :link 和 :visited 一起定义,以区分链接状态。

  • a:link { color: #0000EE; text-decoration: underline; }
  • a:visited { color: #8B008B; }

这样页面中的链接会根据是否被访问自动切换颜色。

基本上就这些。只要记住 :link 是“还没点过”,:visited 是“已经看过”,然后用对应的伪类写样式即可。注意顺序不要颠倒,避免样式被覆盖。不复杂但容易忽略细节。