:link 上直接加 transition 无效，因其无状态变化触发；须将 transition 写在 :link 基础样式中，并用 :link:hover 触发可过渡的样式变更。
为什么 :link 上直接加 transition 没反应
因为 :link 匹配的是「尚未被访问过」的链接，但它本身不触发重绘（re-paint）——链接颜色、下划线等样式变化属于“非动画属性”，浏览器不会自动开启过渡。更关键的是：transition 只对可**渐变的属性**生效（比如 color、opacity、transform），且必须存在明确的「起始态 → 终止态」变化过程。
- 纯静态
:link { color: blue; transition: color 0.3s; }不会动——没后续状态驱动变化 - 必须配合
:hover、:focus或 JS 触发的类切换，才能产生可过渡的样式差 -
:link和:visited是互斥状态，但:visited出于隐私限制，**不能对其设置除color、background-color、border-color等极少数属性外的动画或 transition**
正确做法：用 :link:hover 触发动画
真正能稳定实现“未访问链接悬停动画”的组合是 :link:hover，它既限定范围（只作用于未访问链接），又提供交互触发点。注意别写成 a:hover，否则已访问链接也会响应，失去区分意义。
/* ✅ 正确：仅对未访问链接启用悬停动画 */
a:link {
color: #0066cc;
text-decoration: none;
}
a:link:hover {
color: #003366;
text-decoration: underline;
transition: all 0.25s ease;
}
/ ❌ 错误：a:hover 会覆盖 :visited 链接，且 :visited 不支持 transition /
a:hover {
color: red;
transition: color 0.3s;
}
-
transition写在:link:hover里无效，必须写在基础状态（:link）上，否则首次悬停无过渡 - 若需兼容老浏览器，避免用
all，显式列出要过渡的属性，如transition: color 0.25s, text-decoration 0.25s - 不要给
:link:visited写 transition——语法非法，浏览器会忽略整条规则
想让未访问链接“入场”时也有动画？得靠 JS 配合
CSS 无法监听“链接是否首次渲染为未访问状态”，所以纯 CSS 做不了“页面加载时未访问链接淡入”。但可以用 JS 判断并加类：
// 给所有未访问链接加初始动画类
document.querySelectorAll('a:link').forEach(link => {
link.classList.add('link-enter');
});
// CSS 中定义入场动画
a.link-enter {
opacity: 0;
transform: translateY(4px);
transition: opacity 0.4s, transform 0.4s;
}
a.link-enter:not(:hover) {
opacity: 1;
transform: translateY(0);
}
-
:link在 JS 中可用querySelectorAll('a:link')获取，但注意：该选择器在部分旧版 Safari 中不支持 - 如果页面动态插入链接（如 SPA 路由跳转后），需重新执行判断逻辑
- 别依赖
getComputedStyle(link).color判断是否已访问——:visited的样式在 JS 中被刻意屏蔽，返回值不可靠
容易被忽略的兼容性坑
:link 伪类本身兼容性极好（IE7+），但和 transition 组合时，有几个隐性限制：
立即学习“前端免费学习笔记（深入）”；
- Chrome 89+ 和 Firefox 91+ 开始限制
:visited样式读取，也间接影响某些依赖状态推断的 JS 动画方案 - 移动端 Safari 对
:link:hover支持不稳定——触摸设备没有“悬停”概念，需额外加:active或touchstart事件模拟 - 如果链接是
且没加event.preventDefault()，点击后 URL 变为#，浏览器可能将其标记为“已访问”，下次刷新就不再匹配:link
CSS 动画逻辑不复杂，但 :link 的状态边界和浏览器策略叠加之后，很容易在测试时漏掉已访问/未访问切换、移动端交互、动态内容注入这几个真实场景。