浏览器主动屏蔽非颜色类属性，a:visited仅允许设置color、background-color、border-color等纯颜色属性，其余如display、font-weight、transform等均被静默忽略，以防止历史嗅探攻击。
浏览器主动屏蔽非颜色类属性，不是写法问题
你写的 a:visited { background: #eee; } 没效果，不是选择器错了、没加 !important、也不是顺序不对——是浏览器根本拒绝执行这条规则。从 Chrome 16、Firefox 4 开始，所有主流浏览器都强制限制 :visited 只能修改极少数 CSS 属性，目的是防止历史嗅探（history sniffing）攻击：通过样式差异反推用户访问过哪些链接。
被静默忽略的常见写法包括：
-
a:visited { display: none; }→ 布局类属性，直接丢弃 -
a:visited { font-weight: bold; }→ 字体类，不生效 -
a:visited { transform: scale(1.1); }→ 变换类，无效 -
a:visited { transition: color .2s; }→transition本身被忽略，但color变化仍会触发（只是没有过渡）
:visited 允许设置的属性非常有限
目前唯一安全可用的属性集中在“纯颜色”范畴，且必须是可继承的颜色值（不能用 currentColor 动态推导）：
-
color（文字色） -
background-color（注意：仅背景色，background-image等全被禁） -
border-color（含border-top-color等细分方向） outline-colorcolumn-rule-colortext-decoration-color-
fill和stroke（SVG 元素内适用）
连 opacity、font-size、padding、height 都不行，!important 对这些限制完全无效。
层叠顺序和声明位置影响实际效果
:link 和 :visited 权重相同，谁写在后面谁生效；但它们互斥——一个链接不可能同时匹配两者。容易踩的坑有：
- 把
a:visited写在a:hover后面，结果悬停时颜色被:hover覆盖，而你本意是想让“已访问+悬停”有独立样式 → 应该显式写a:visited:hover - 用了更具体的选择器，比如
.nav a:visited，权重高于a:visited，但若同时存在a { color: red; }，它可能覆盖掉伪类颜色 - 内联样式
style="color:green"永远胜出，:visited拿它没辙
JavaScript 无法读取 :visited 状态，也不能绕过
别试 getComputedStyle(link).color 判断是否已访问——浏览器返回的永远是未访问状态下的计算值（比如 rgb(0, 0, 255)），哪怕链接确实点过。同样，CSS 自定义属性（如 --is-visited）在 :visited 规则里声明会被静默忽略，JS 也读不到任何变化。
真要实现可靠的状态反馈，只能放弃 :visited，改用 JS 主动管理：
- 监听
click事件，对event.target.closest('a[href]')打标记（加 class 或data-visited） - 配合
localStorage持久化记录 URL 访问状态 - 单页应用中用
pagehide/pageshow补充跨页跳转场景
这个方案不依赖浏览器对 :visited 的不可靠支持，还能做动画、tooltip 更新、甚至服务端同步——但代价是你得自己维护状态，而不是交给 CSS 自动处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
