a标签下划线需显式重置link/visited/hover/active四状态，仅设a{text-decoration:none}无效；禁用链接须用pointer-events:none+tabindex:-1，非仅改cursor。
a 标签的下划线不是“有或无”的二选一，而是状态叠加+样式覆盖的结果。只写 a { text-decoration: none; } 通常没用，因为伪类、框架样式或 UA 规则会立刻把它盖掉。
为什么 a:hover 还有下划线？必须覆盖全部四个伪类
浏览器默认只对未访问链接（a:link）和已访问链接（a:visited）应用基础样式，但悬停（a:hover）和点击中（a:active）是独立状态——它们各自继承 UA 样式，不自动沿用你写的 a 规则。
- 常见错误：写了
a { text-decoration: none; }，但没写a:hover，结果鼠标一移上去下划线就弹出来 - 正确做法：显式重置全部四个状态，顺序按 LVHA（
:link→:visited→:hover→:active）避免冲突 - 最简安全写法：
a, a:link, a:visited, a:hover, a:active { text-decoration: none; } - 注意：
a:visited不能设text-decoration-color或动画，这是浏览器强制限制，不是你写错了
text-decoration: none 不生效？先看 computed 值，再查覆盖源
DevTools 的 Styles 面板里看到 text-decoration: none 被划掉，说明它被更高权重的选择器干掉了；如果显示为 none 却仍有下划线，那这根线根本不是 text-decoration 画的。
- 检查是否被第三方 CSS 覆盖：比如 Bootstrap 的
.nav-link或 Tailwind 的underline类加了!important - 确认父容器有没有用
::after伪元素模拟下划线，或者用了text-underline-offset挤压位置 - 打开 DevTools 的 Computed 面板，搜
text-decoration和color，看最终计算值到底是多少 - 若项目用了 UI 框架，别硬刚全局
a，改用自定义类如.plain-link更稳
想加动画或虚线？text-decoration 本身不支持过渡
text-decoration 是布尔型开关（开/关），浏览器不把它当可动画属性。直接写 transition: text-decoration 0.3s 完全无效。
- 要实现“平滑出现”的下划线，用
border-bottom：默认设border-bottom: 1px solid transparent，hover 时改颜色和宽度 - 要虚线效果，别碰
text-decoration-style: dashed（兼容性差、a:visited下禁用），改用border-bottom: 1px dashed #999 - 若文字用了
vertical-align或 flex 布局导致下划线贴不上基线，换background-image: linear-gradient(to right, #000 0%, #000 100%)+background-size: 0 1px控制展开更可靠
禁用链接时，仅改 cursor 不够
把链接变灰、加 cursor: default 只是视觉欺骗。用户依然能点，键盘 Tab 仍可聚焦，屏幕阅读器也照读不误。
- 真正禁用必须加
pointer-events: none，同时设tabindex: -1移出焦点流 - 如果只是临时不可点（比如加载中），建议用状态类如
.link--disabled统一控制样式和行为 - 别忘了：禁用后，
a:visited状态逻辑失效，历史记录判断也会受影响
最常被忽略的其实是 a:visited 的限制——它看起来像普通伪类，实则被浏览器锁死了可用属性。试图给它加动画、改下划线颜色或用 getComputedStyle 读取装饰状态，都会失败或返回默认值。这不是 bug，是故意的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
