CSS动态伪类选择器:link和visited的区别

夜敏吖_8078

夜敏吖_8078

2025-07-10

507人浏览

原创

a:link匹配未访问过的链接,用于设置默认样式;a:visited匹配已访问过的链接,用于设置点击后的样式。两者区别在于匹配条件不同:1. a:link仅适用于未被点击或浏览器未记录的链接,一旦点击后便不再匹配;2. a:visited在用户访问过链接并被浏览器记录后生效,但现代浏览器出于隐私保护限制了其可设置的样式属性;3. 使用时应注意书写顺序(a:link → a:visited → a:hover → a:active),避免状态覆盖;4. 不可用于获取用户浏览历史,且兼容性需测试;5. 常用于导航菜单或文章推荐中区分已读与未读状态。

CSS动态伪类选择器:link和visited的区别

a:linka:visited 是 CSS 中用于控制超链接样式的两个动态伪类选择器,它们的区别主要体现在匹配的条件不同。

CSS动态伪类选择器:link和visited的区别

a:link —— 匹配未访问过的链接

这个伪类匹配的是用户还没有点击过、浏览器也没有记录访问历史的链接。通常用它来设置链接的默认样式。

比如:

CSS动态伪类选择器:link和visited的区别
a:link {
  color: blue;
}

这样设置之后,页面上所有还没被访问过的链接都会显示为蓝色。

需要注意:

CSS动态伪类选择器:link和visited的区别
  • 链接只要被点击过一次,并且浏览器记录了这个地址的历史,就会不再匹配 a:link
  • 它只适用于 <a></a> 标签带有 href 属性的情况,不带 href 的锚点不会被匹配

a:visited —— 匹配已经访问过的链接

这个伪类匹配的是用户已经访问过的链接。一旦链接被点击并且浏览器记录了该 URL 的访问历史,它就会匹配 a:visited 规则。

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

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

下载

例如:

a:visited {
  color: purple;
}

这段代码会让用户已经访问过的链接变成紫色。

但要注意:

  • 出于隐私保护的原因,现代浏览器对 a:visited 可以设置的样式做了限制,不能随意修改某些属性(比如 background-image 或者 text-shadow
  • 不同浏览器可能在支持程度上略有差异,测试时要留意兼容性问题

使用建议和注意事项

为了保证链接状态的样式能正确应用,有几个小技巧可以记住:

  • 顺序很重要:通常建议按照 a:linka:visiteda:hovera:active 这个顺序写 CSS,否则某些状态可能被覆盖
  • 不要试图绕过浏览器限制:比如想通过 a:visited 获取用户的浏览历史,这是行不通的,浏览器已经对此类行为做了严格限制
  • 可以用在导航菜单或文章推荐中:比如你希望用户知道哪些文章他们已经读过了,就可以通过 a:visited 把这些链接标灰或者加一个标记

总结一下

简单来说,:link 是“没点过的”,:visited 是“点过的”。两者配合使用,可以让你的网站链接更有状态感,也能提升用户体验。不过因为浏览器安全机制的存在,在样式自由度上会有些限制。

基本上就这些。

前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

css 浏览器 伪类选择器

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Aionclaw智能助手介绍
Aionclaw智能助手介绍

本专题汇总了AionClaw(AI龙虾助手)的功能介绍与在线使用入口。AionClaw是杭州趣猿人工智能有限公司推出的桌面级AI智能体,能直接在电脑上读写文件、运行脚本、操作浏览器,自动交付Word、PPT、Excel等成品。

2026.09.20

0

13

AionClaw AI智能体与电脑自动化任务执行功能使用教程
AionClaw AI智能体与电脑自动化任务执行功能使用教程

AionClaw专题整理AI智能体与电脑自动化相关功能使用教程,涵盖安装部署、AI任务执行、Skills技能、文件处理、浏览器控制、电脑操作、持久记忆、聊天工具连接以及办公、编程和内容创作等功能,帮助用户快速掌握AionClaw的实际使用方法。

2026.09.20

0

15

AI视频生成软件推荐
AI视频生成软件推荐

本专题汇总了当前主流的AI视频生成软件推荐与排行榜单,涵盖seko、AniShort、剧云、Lovart、LiblibAI及立刻mv等热门工具。同时整理了各软件在文生视频、图生视频、时长限制、画质表现及免费额度等方面的差异对比,助您快速选对适合创作需求的AI视频生成工具。

2026.09.16

180

9

ai生成视频的工具免费版合集
ai生成视频的工具免费版合集

本专题汇总了当前免费AI生成视频工具的排行榜与推荐清单,涵盖seko、讯飞智作、AniShort及剧云、Lovart等多模型集成平台。同时整理了各工具的免费额度、输出时长、水印政策及适用场景差异,助您快速选择合适工具开启AI视频创作。

2026.09.16

60

10

Pandas时间序列分析与可视化报表
Pandas时间序列分析与可视化报表

本专题整理Pandas日期转换、时间索引、重采样、滚动窗口、时区处理、plot绘图、Styler表格样式和报表输出方法。

2026.09.16

80

23

Pandas数据筛选索引与清洗处理
Pandas数据筛选索引与清洗处理

本专题整理Pandas中的loc、iloc、条件筛选、query查询、缺失值处理、重复值删除、类型转换和字符串列清洗方法。

2026.09.16

60

25

Pandas数据读取导入与文件导出处理
Pandas数据读取导入与文件导出处理

本专题整理Pandas读取CSV、Excel、JSON、SQL、Parquet等文件的方法,以及to_csv、to_excel、to_sql和to_parquet等常用数据导出流程。

2026.09.16

40

27

GDB怎么设置断点
GDB怎么设置断点

本专题介绍GDB按照函数名、源代码行号和文件位置设置断点的方法,详细说明run、continue、next、step等命令的配合使用,帮助定位程序崩溃、逻辑异常及代码未按预期执行的问题。

2026.09.11

380

28

GDB怎么查看变量值
GDB怎么查看变量值

本专题介绍GDB调试过程中查看变量值的具体方法,涵盖局部变量、函数参数、数组、结构体和指针内容查询,同时整理变量持续显示、格式化输出及无法读取变量时的排查思路。

2026.09.11

120

22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 1.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 5.5万人学习

CSS教程
CSS教程

共754课时 | 93万人学习