a标签hover颜色突变因未声明transition，需在基础状态定义过渡且避开:visited限制；下划线平滑变色应改用border-bottom；移动端点击反馈需用JS添加class或transform替代:active。
为什么 a 标签 hover 时颜色突变，不平滑？
因为默认没声明 transition，浏览器直接跳变。关键点是：过渡规则必须写在 a 的「基础状态」里（比如 a 或 a:not(.visited)），不能只写在 :hover 里；否则第一次移入没动画，只有移出才有。
a 颜色过渡必须避开 :visited 干扰
已访问链接的 :visited 伪类受浏览器限制：多数现代浏览器禁止它修改 color 以外的属性，且不允许用 transition 动画 :visited 的颜色变化。常见错误现象是：鼠标移入未访问链接正常过渡，移入已访问链接却瞬间变色。
- 不要依赖
a:visited { color: purple; transition: color 0.3s; }—— 这行在 Chrome/Firefox 中基本无效 - 统一用 class 控制状态，例如
a.is-visited，再配合 JS 检测并添加 class - 若必须支持
:visited，只设静态色值，别加 transition；把平滑过渡留给a:hover和a:focus
如何让 a 的文字和下划线都平滑变色？
a 默认带下划线（text-decoration），但它本身不可动画。要实现“文字+下划线同步变色”，得把下划线抽成伪元素，再对它的 color 或 background-image 做过渡。
- 推荐做法：用
border-bottom替代下划线，因为它可被border-color过渡控制 - 示例：
a { color: #007bff; border-bottom: 1px solid currentColor; transition: color 0.25s ease, border-color 0.25s ease; } - 避免用
text-decoration-color过渡 —— 它虽可动画，但 Safari 支持不稳定，且不能独立控制粗细/偏移
移动端点击反馈为何一闪而过，怎么改？
:active 在 iOS Safari 和部分安卓浏览器中持续时间极短（约 100ms），且仅对「可点击语义元素」可靠（如 a、button）。直接靠它做颜色反馈，人眼几乎感知不到。
- 不要只写
a:active { color: #555; }—— 效果不可控 - 改用 JS 监听
touchstart添加临时 class，例如a.is-pressed，并在 CSS 中定义该 class 的颜色过渡 - 更轻量方案：用
transform: scale(0.98)配合color变化，视觉反馈更强 - 注意：如果
a包含 SVG 图标，确保其fill设为currentColor，否则点击时图标色不会随文字同步变
真正难搞的不是写几行 transition，而是状态叠加时的优先级和浏览器限制 —— 尤其当 :visited、:hover、JS 添加的 .active 同时存在，过渡规则容易被覆盖或跳过。建议所有状态切换都收归 class 管理，CSS 里只留一套干净的过渡声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
