a { text-decoration: none; } 经常失效是因为未覆盖 a:link、a:visited、a:hover、a:active、a:focus 等所有状态，且易被框架样式覆盖或损害可访问性；稳妥做法是显式声明全部伪类并确保视觉区分符合 wcag 标准。
直接写 a { text-decoration: none; } 能去下划线，但大概率出问题——不是代码错了，而是漏状态、被覆盖、或伤可访问性。
为什么 a { text-decoration: none; } 经常失效
浏览器默认只对 a:link 加了 text-decoration: underline，而你写的规则没覆盖到其他状态：
-
a:visited（已访问链接）可能还带下划线 -
a:hover或a:focus一旦有框架/组件自带样式，就会立刻“弹”出下划线 - Bootstrap、Tailwind 等 CSS 框架的权重更高，
a选择器根本压不住 - 父级元素用了
text-decoration: underline（虽然不继承，但伪元素模拟的下划线会干扰判断）
稳妥写法：显式覆盖全部伪类
真正能稳住的最小集合是：
a,
a:link,
a:visited,
a:hover,
a:active,
a:focus {
text-decoration: none;
}
注意点：
-
a:focus必须包含——键盘用户靠它定位，去掉等于破坏可访问性 - 如果用的是 Bootstrap 5.3+，直接加
class="text-decoration-none"更省心，它已预设好所有状态 - 别用
!important硬顶，后期维护时你会想删掉自己写的每一行
只给部分链接去下划线，别动全局
更推荐的做法是用类名控制，比如：
HTML 中写：@#@#@#@#@#@#@#@#@#@0
CSS 中写：
.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:hover,
.nav-link:active,
.nav-link:focus {
text-decoration: none;
}
好处很明显：
- 不影响按钮、卡片内嵌链接等其他地方的默认行为
- 后续加 hover 效果（比如
border-bottom: 1px solid currentColor）也容易扩展 - 配合 Lighthouse 做可访问性扫描时，不会因全局移除
text-decoration被标红
去掉下划线后，用户真能认出这是链接吗
这是最容易被跳过的实际问题。纯文字 + 无下划线 + 单一颜色，在色弱屏、强光环境、小字号下基本不可识别。
WCAG 明确要求：链接必须提供至少两种视觉区分方式。所以：
- 保留
a:hover的下划线，或者换成border-bottom/ 背景色变化 - 确保链接文字与背景对比度 ≥ 4.5:1（Chrome DevTools 的 Lighthouse 可自动检测）
- 关键操作链接（如“删除”“支付”）务必加图标或文字说明，不能只靠颜色或悬停反馈
真正麻烦的从来不是怎么写那行 text-decoration: none，而是写完之后，用户还能不能一眼看出“这儿能点”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
