:visited 样式受限是因隐私保护，仅允许 color 等极少数静态属性，且 color 不支持透明度；必须遵循 LVHA 顺序（:link→:visited→:hover→:active），否则交互失效。
为什么 :visited 样式受限，连 color 都不能随便改
浏览器出于隐私保护，严格限制 :visited 伪类能修改的 CSS 属性。你不能用它设置 background-color、border、transform，甚至 color 也只允许设为不带透明度的纯色（比如 #0066cc 可以，rgba(0,102,204,0.5) 会失效）。这是防止脚本通过样式探测用户浏览历史。
- 可用属性极少：仅
color、background-color（部分浏览器已禁）、border-color（同上）、outline-color，且都必须是不依赖其他状态的静态值 - 不能搭配
transition或animation使用，否则整条规则会被忽略 - 若想实现“已访问链接变灰”，老老实实用
color: #666，别试filter: grayscale(1)—— 它不会生效
:hover 和 :active 的顺序不能乱，否则点击没反应
CSS 伪类有特定层叠优先级，:link 和 :visited 是初始状态，:hover 是悬停，:active 是鼠标按下瞬间。如果把 :active 写在 :hover 前面，按下时可能被 :hover 覆盖，导致视觉无反馈。
- 标准书写顺序必须是：
:link→:visited→:hover→:active（LVHA） - 现代写法可合并：用
a:not(:visited):hover单独控制未访问链接的悬停，但:active仍需紧接其后 - 移动端要注意：
:active在触摸屏上触发短暂，若想延长反馈，得配合touch-action: manipulation或 JS 模拟
a:link { color: #007bff; }
a:visited { color: #666; }
a:hover { color: #0056b3; text-decoration: underline; }
a:active { color: #004080; }
如何让 :hover 效果在按钮类链接上更自然
普通文字链接加 :hover 往往只改颜色或下划线，但如果是 <a class="btn"> 这种当按钮用的链接，需要更明确的状态反馈。
- 避免只靠颜色变化：人眼对亮度差异敏感度低，建议叠加
transform: translateY(-1px)或box-shadow - 过渡要克制：用
transition: all 0.15s ease，别写all 0.5s—— 太慢显得卡顿 - 注意焦点可访问性：键盘
Tab切换时，:focus应与:hover样式一致，否则视障用户会困惑
a.btn {
display: inline-block;
padding: 8px 16px;
background: #007bff;
color: white;
border-radius: 4px;
}
a.btn:hover,
a.btn:focus {
background: #0056b3;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
使用 :link 时容易忽略的默认行为
:link 只匹配未被访问过的超链接（即 href 存在且协议合法，如 http://、https://、/about），它**不会**匹配 mailto:、tel:、javascript: 或无 href 的 <a> 标签。
立即学习“前端免费学习笔记（深入）”；
- 若想统一所有
<a>标签基础样式，应直接写a，再用:link/:visited覆盖特定状态 -
:link的权重和元素选择器相同，所以a.my-link:link会覆盖a:link，但不会覆盖.my-link - 某些框架（如 Bootstrap）重置了
a的text-decoration，此时单独写a:link { text-decoration: none; }可能无效，得加!important或提高选择器权重
:visited 的隐私限制，或者把 :active 放错位置导致点击反馈消失 —— 这两个点调试起来特别隐蔽。 
