浏览器强制限制:visited仅能修改color、background-color等极少数颜色属性，禁止font-size、transform等非颜色样式及嵌套选择器；深度定制需改用localStorage或服务端标记方案。
不能深度定制。 浏览器强制限制 :visited 只能修改极少数颜色类属性，所谓“深度定制”在纯 CSS 层面根本不存在。
为什么写了 background-color 却没反应
你可能试过 a:visited { background-color: #f0f0f0; }，但页面毫无变化——这不是写法错，是浏览器直接丢弃该声明。现代 Chrome、Firefox、Safari 都只允许 :visited 修改：color、background-color（仅纯色，不支持渐变或透明度）、border-color、outline-color、column-rule-color、fill 和 stroke（仅限内联 SVG）。其他所有属性，包括 font-size、padding、margin、text-decoration（已全面禁用）、transform、opacity（中间值不可靠），全被忽略。
:visited 的选择器必须直击 <a> 元素本身
以下写法全部无效或高风险：
-
.nav-item a:visited—— 权重没问题，但若.nav-item是容器而非<a>自身，某些浏览器会降权处理 -
a:visited span—— 无法影响后代元素，:visited不传播 -
a:hover:visited或a:visited:hover——:visited不能与:hover/:active/:focus组合，链式伪类直接失效 -
a[href^="/article"]:visited—— 属性选择器 +:visited在部分浏览器中被限制，尤其当 href 含动态参数时匹配失败
常见失效原因：不是代码问题，是环境或协议限制
即使语法完全正确，:visited 也可能不生效，因为：
立即学习“前端免费学习笔记（深入）”；
- 链接的
href是#、javascript:void(0)或空值 —— 这些不构成可记录的历史 URL - 页面用
file://协议打开（双击本地 HTML 文件）—— 大多数浏览器默认禁用:visited - 用户处于无痕/隐私模式 —— 历史不保存，
:visited永远为空 - 目标页面跳转后未真正加载完成（比如 SPA 中仅更新视图但未触发 history.pushState），浏览器未将其计入访问历史
- CSS 被注入到 scoped style 或 Shadow DOM 中，
:visited作用域失效
真要“深度定制”，只能放弃 :visited 本身
如果你需要加图标、改布局、触发动画、或区分不同访问状态（如“今天访问过” vs “上周访问过”），:visited 无能为力。可行路径只有：
- 前端用
localStorage记录点击过的href，再通过 JS 添加class="visited"，然后用普通 class 控制任意样式 - 服务端在渲染 HTML 时，根据用户登录态和浏览日志，直接给对应
<a>标签加data-visited="true"或 class - SPA 场景下监听
history变化，结合IntersectionObserver判断是否曾进入某路由，再打标记
这些方案绕开了浏览器对 :visited 的硬性限制，但也意味着你不再依赖浏览器历史，而是自己维护一套访问状态逻辑 —— 这才是实际项目中真正可控的“深度定制”起点。
