:visited伪类仅允许修改color、background-color等有限CSS属性，禁止font-size、display等样式及复杂选择器组合，本质是浏览器为保护隐私实施的限制。
直接用 :visited 伪类就能设置已访问链接的样式，但浏览器出于隐私保护做了严格限制——你只能修改有限的几个 CSS 属性。
哪些 CSS 属性在 :visited 中真正生效
现代浏览器（Chrome、Firefox、Safari）只允许在 :visited 中安全使用以下属性：
-
color、background-color（仅纯色，不支持渐变） -
border-color（包括border-top-color等细分项） outline-colorcolumn-rule-color-
fill和stroke（仅对 SVG 内联元素有效） -
opacity（但设为0或1才可靠，中间值可能被忽略）
下面这些常见写法全部无效：font-size、display、margin、padding、transform、background-image、text-decoration（部分浏览器曾支持，现已禁用）。
:visited 的选择器写法必须具体且独立
不能靠继承或复杂组合“间接”影响已访问链接。比如：
立即学习“前端免费学习笔记（深入）”；
a:visited { color: purple; }
/* ✅ 正确：直接作用于 a 元素 */但下面这些会失效或被忽略：
.nav-link:visited { color: #666; }
/* ⚠️ 可能失效：如果 .nav-link 不是 标签本身，而是包裹它的容器 */
a:visited span { color: red; }
/ ❌ 无效：不能通过 :visited 影响后代元素 /
a:hover:visited { color: orange; }
/ ❌ 无效：:visited 不能和其他动态伪类链式组合（:hover/:active/:focus 均不可） /
为什么改了 color 却没变化？常见原因
即使用了合法属性，也常因以下原因看不到效果：
- 链接地址带参数或锚点（如
/page.html?ref=1和/page.html被视为不同 URL） - 页面刚打开时，浏览器尚未完成历史记录匹配，需真实点击跳转并返回才触发
- CSS 优先级被更高权重的选择器覆盖（比如
a[href] { color: blue; }比a:visited权重高） - 使用了
!important但目标属性本身被浏览器策略屏蔽（如给text-decoration加!important仍无效）
替代方案：服务端或 JS 记录访问状态
如果真需要更自由的样式（比如加图标、改布局、动画），:visited 不够用。可行路径有：
-
后端在生成 HTML 时，根据用户浏览历史给对应
添加class="visited" -
前端用
localStorage或sessionStorage手动记录点击过的href，再用 JS 动态加 class - 用 Intersection Observer + history.state 判断是否曾进入过某路由（适合 SPA）
纯 CSS 的 :visited 是个“瘦接口”，设计初衷就不是为了视觉定制，而是提供基础可辨识性。想绕过限制强行探测访问历史，浏览器会主动降级或报错——这不是 bug，是 deliberate privacy guard。
