:visited 仅允许 color、background-color（纯色）、border-color 等少数安全属性生效，opacity、transform 等均被浏览器禁用以防止隐私泄露；验证需用 devtools 强制触发状态。
为什么 :visited 现在改不了颜色了
浏览器从 2010 年代中后期开始大幅限制 :visited 的样式能力，主要是为了防止通过 CSS 探测用户历史访问记录（隐私泄露漏洞）。你现在用 color、background-color、border-color 等属性设颜色，大多数情况下仍有效；但一旦涉及 opacity、transform、transition、box-shadow 或读取 getComputedStyle，浏览器会直接忽略或返回默认值。
这不是你写错了，是浏览器故意的——它只允许极少数“安全”的视觉属性生效。
:visited 还能安全用的颜色相关属性有哪些
目前主流浏览器（Chrome、Firefox、Safari）仅允许以下属性在 :visited 中产生实际渲染效果：
color-
background-color（仅当不依赖渐变或图片时） -
border-color（含border-top-color等细分项） outline-colorcolumn-rule-color
注意：background-image、text-shadow、filter 全部被禁用；font-size 和 margin 等布局属性也一律无效。试图用它们做“降级”只会白忙活。
怎么写出真正生效的降级链接样式
所谓“降级”，本质是让已访问链接比未访问时更灰、更淡、更低对比度。可行路径只剩一条：老老实实用 color 配合有限的背景/边框变化。
示例（真实可用）：
/* 未访问时是蓝色 */
a { color: #1a6dff; text-decoration: none; }
/* 已访问就变灰，且加下划线强调“已看过” */
a:visited { color: #777; border-bottom: 1px dashed #ccc; }
/* 注意：不要写 a:visited { opacity: 0.8 } —— 它不会生效 */
关键点：
- 别指望靠透明度或模糊实现“弱化”，
opacity在:visited下完全被忽略 - 如果用了
background-color，确保它不是渐变或带 alpha 的 rgba 值（某些旧版 Firefox 会拒斥） - 不要在
:visited里写:hover组合（如a:visited:hover），部分浏览器会直接跳过整个规则
遇到颜色没变？先检查这三件事
常见失效不是因为语法错，而是环境或逻辑问题：
- 链接必须是真实可跳转的
<a href="https://example.com"></a>，href="#"或空href不会被浏览器记为“已访问” - 本地文件协议（
file://）下，Chrome 和 Edge 默认禁用:visited样式，需起本地服务测试 - CSS 优先级被覆盖：比如全局写了
a { color: inherit; }，那a:visited就很难抢赢，得加!important或提高选择器权重
最稳妥的验证方式：打开 DevTools → Elements → 找到那个 <a></a> 标签 → 右键 “Force element state” → 勾选 :visited，看样式是否实时变化。
真要彻底降级，别绕弯子——color 是唯一可靠出口，其他都是障眼法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
