应按LVHA顺序分别设置a:link、a:visited、a:hover、a:active伪类样式，其中a:visited仅支持color等有限属性，禁用text-decoration-color和动画以防历史探测；需添加cursor:pointer并用opacity或background-color提供hover反馈，避免仅依赖颜色变化。
怎么用 CSS 控制 a 标签的默认颜色和下划线
直接写 a { color: blue; text-decoration: none; } 是最基础的做法，但这样会同时影响所有状态（未访问、已访问、悬停、激活），容易导致交互反馈丢失。实际项目中更推荐按伪类分别设置，否则用户可能分不清哪条链接点过、哪条能点。
常见错误是只改了 a 默认样式，结果鼠标移上去颜色变回蓝色、下划线又出来了——那是因为没覆盖 a:hover 等状态。
- 必须显式定义
a:link（未访问）、a:visited（已访问）、a:hover、a:active四个伪类，顺序不能错（LVHA 规则） -
text-decoration默认是underline，设为none才能去掉下划线 -
a:visited受浏览器限制，只能修改有限样式（color、background-color、border-color等），不能改text-decoration-color或加动画
为什么 a:visited 改不了下划线颜色或动画
这是浏览器安全策略强制限制的：防止通过样式探测用户历史访问记录。比如你给 a:visited 加 text-decoration: underline solid red，JS 就可能读取渲染后属性反推该链接是否被访问过。
所以即使写了 a:visited { text-decoration-color: red; }，浏览器也会忽略它。能生效的只有 color、background-color、border-color、outline-color 这几项。
立即学习“前端免费学习笔记（深入）”；
- 想统一视觉风格？别依赖
a:visited的装饰变化，改用图标或文字标注（如「已读」） - 调试时发现
a:visited样式不生效，先检查是不是用了被禁用的属性 - Chrome 和 Firefox 对
a:visited的限制一致，Safari 更严格
去掉下划线但保留手型光标和可点击感
很多人设了 text-decoration: none 后，发现链接看起来像普通文字，用户不敢点。这不是样式问题，是缺少交互反馈信号。
- 务必加上
cursor: pointer，否则鼠标移上去没有手型 - 用
a:hover { opacity: 0.8; }或transform: scale(1.02)提供轻量反馈，比加下划线更现代 - 如果链接在深色背景上，
a:hover { background-color: rgba(0,0,0,0.05); }比改颜色更稳妥 - 注意：不要只靠颜色变化做 hover 效果，色弱用户可能完全看不出区别
内联样式 or 外部 CSS？哪个更适合控制 a 标签
内联样式（style="color:red"）优先级最高，但会覆盖所有外部规则，包括 :hover 状态——这意味着你写了 style="color:red"，那 a:hover { color: blue; } 就失效了。
除非是 CMS 输出的富文本内容里临时加样式，否则不建议用内联方式控制链接外观。
- 全局链接样式统一用外部 CSS，写在
base.css或typography.css里 - 需要局部覆盖时，用 class（如
<a href="#" class="btn-link">），再写.btn-link:hover - 用 CSS 自定义属性（
--link-color）方便主题切换，但注意a:visited不能用 var() 赋值给受限属性
color，而是让所有状态之间过渡自然、符合用户预期，同时避开浏览器限制和可访问性陷阱。特别是 a:visited 的边界，很容易在测试阶段才暴露问题。 
