0

0

css 想为未访问的链接设置样式怎么办_使用 :link 伪类单独定义链接样式

P粉602998670

P粉602998670

发布时间:2026-01-22 12:53:50

|

836人浏览过

|

来源于php中文网

原创

必须用 :link 选择器设置未访问链接样式,它仅匹配含 href 且未被访问的链接,与 :visited 互斥;需遵循 lvha 顺序,且仅支持 color、text-decoration 等非隐私敏感属性。

css 想为未访问的链接设置样式怎么办_使用 :link 伪类单独定义链接样式

未访问链接必须用 :link,不能只写 a

直接给 a 标签写样式,会同时影响所有状态(已访问、悬停、点击中、激活后),无法单独控制“从未点过”的链接。浏览器对链接状态有严格区分:只有 :link 专指 href 存在且尚未被用户访问过的链接。它和 :visited 是互斥的——同一个链接,要么匹配 :link,要么匹配 :visited,不会同时生效。

:link 必须配合 href 属性才起作用

没有 href<a></a> → 匹配 :link

  • ❌ 无效:href="#" → 某些浏览器可能跳过 href="javascript:void(0)"
  • 顺序很重要:<a href="/about">关于</a>:link 要放在 <a>关于</a>href 前面

    CSS 伪类的层叠顺序(LVHA)必须遵守,否则 :link 可能覆盖掉 <a href="#">回到顶部</a> 的颜色等声明。浏览器按声明顺序应用规则,后写的会覆盖前面同名属性。

    a:link {
      color: #0066cc;
    }
    a:visited {
      color: #666;
    }
    a:hover {
      color: #003366;
    }
    a:active {
      color: #ff6600;
    }

    如果把 :link 放在 :link 前面,且两者都设了 :visited,那么悬停时虽然匹配 :hover,但一旦鼠标移开,:active 的颜色可能因顺序靠后而没生效——因为实际生效的是最后一条匹配规则。

    Sesame AI
    Sesame AI

    一款开创性的语音AI伴侣,具备先进的自然对话能力和独特个性。

    下载

    :hover 无法设置某些隐私敏感样式

    出于安全限制,现代浏览器禁止通过 :link(以及间接影响它的 a:hover)读取或设置以下 CSS 属性:背景图、a:linkcolor:hover:link 以外的文本相关属性(如 :link:visited)。这意味着你只能安全地用 :link 控制 background-colorborder-coloroutline-color 等非泄露性样式。

    立即学习前端免费学习笔记(深入)”;

    真正容易被忽略的是:哪怕只是想让未访问链接加个下划线、已访问的去掉,也得明确写 colorfont-size——只写其中一条,另一条会回退到浏览器默认(通常是带下划线),而不是“保持不变”。

    热门AI工具

    更多
    DeepSeek
    DeepSeek

    幻方量化公司旗下的开源大模型平台

    豆包大模型
    豆包大模型

    字节跳动自主研发的一系列大型语言模型

    通义千问
    通义千问

    阿里巴巴推出的全能AI助手

    腾讯元宝
    腾讯元宝

    腾讯混元平台推出的AI助手

    文心一言
    文心一言

    文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

    讯飞写作
    讯飞写作

    基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

    即梦AI
    即梦AI

    一站式AI创作平台,免费AI图片和视频生成。

    ChatGPT
    ChatGPT

    最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

    相关专题

    更多
    javascriptvoid(o)怎么解决
    javascriptvoid(o)怎么解决

    javascriptvoid(o)的解决办法:1、检查语法错误;2、确保正确的执行环境;3、检查其他代码的冲突;4、使用事件委托;5、使用其他绑定方式;6、检查外部资源等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

    186

    2023.11.23

    java中void的含义
    java中void的含义

    本专题整合了Java中void的相关内容,阅读专题下面的文章了解更多详细内容。

    134

    2025.11.27

    js正则表达式
    js正则表达式

    php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

    530

    2023.06.20

    js获取当前时间
    js获取当前时间

    JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

    576

    2023.07.28

    js 字符串转数组
    js 字符串转数组

    js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

    760

    2023.08.03

    js是什么意思
    js是什么意思

    JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

    6204

    2023.08.17

    js删除节点的方法
    js删除节点的方法

    js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

    492

    2023.09.01

    js截取字符串的方法
    js截取字符串的方法

    js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

    221

    2023.09.04

    C# ASP.NET Core微服务架构与API网关实践
    C# ASP.NET Core微服务架构与API网关实践

    本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

    3

    2026.03.11

    热门下载

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

    精品课程

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

    共14课时 | 0.9万人学习

    Bootstrap 5教程
    Bootstrap 5教程

    共46课时 | 3.6万人学习

    CSS教程
    CSS教程

    共754课时 | 42.2万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号