应优先通过提高选择器权重（如 .navbar a）覆盖 bootstrap 链接下划线，避免滥用 !important；若全局去除，须确保颜色对比度 ≥ 4.5:1 并提供悬停/聚焦反馈以满足可访问性要求。
如何用 css 覆盖 bootstrap 的链接下划线
bootstrap 默认给所有 a 标签加了 text-decoration: underline，但这个样式只在未设置 text-decoration 的情况下生效——也就是说，你只要显式声明一次，就能覆盖它。
最直接的做法是在自己的 CSS 文件里写：
/* 去掉所有链接下划线 */
a {
text-decoration: none;
}
但这样太粗暴，容易误伤。更稳妥的方式是按需覆盖：
- 只去掉导航栏里的链接下划线？用
.navbar a - 只改页脚链接？用
.footer a - 想保留悬停效果？补上
a:hover { text-decoration: underline; }
text-decoration 在 Bootstrap 5 和 4 中的位置差异
Bootstrap 5 把链接样式收进了 _reboot.scss，最终编译成全局 a 规则；而 Bootstrap 4 是在 _type.scss 里定义的。如果你用的是 CDN，根本不用管源文件，直接覆盖即可。
注意：如果你用的是 Sass 版本并自己编译，可以改 $link-decoration 变量（Bootstrap 5）或 $link-hover-decoration，但变量只控制悬停状态，基础下划线还得靠 CSS 覆盖。
- Bootstrap 5 变量名：
$link-decoration（默认none，但实际 CSS 仍写了underline，变量未完全接管） - Bootstrap 4 没提供对应变量，必须手动覆盖
- 用 Sass 编译时，你的自定义 CSS 必须在 Bootstrap 之后引入，否则无效
为什么加 !important 有时也不起作用
不是 !important 失效，而是选择器权重不够。比如 Bootstrap 写的是：
a:not([href]):not([class]) { text-decoration: none; }
这种带伪类和属性的选择器权重比单纯一个 a 高。所以如果发现你的 a { text-decoration: none !important; } 没生效，大概率是被更高权重要素压了。
- 检查浏览器开发者工具里，哪条
text-decoration被划掉了 - 试试提高选择器权重：
body a、.my-app a或直接复刻 Bootstrap 的选择器结构 - 避免滥用
!important，它会让后续维护变困难，尤其团队协作时
要不要全局关掉下划线？先看可访问性影响
纯文字链接没下划线 + 没颜色对比度变化 = 屏幕阅读器用户和色觉障碍者可能根本看不出那是链接。WCAG 要求链接至少满足以下之一：
- 有明显颜色差异（如深蓝 vs 黑灰）
- 有非颜色标识（如下划线、图标、边框）
- 悬停/聚焦时出现变化
所以，如果关了下划线，务必确保：a 和 body 文字颜色差值 ≥ 4.5:1，并且 a:focus 和 a:hover 有清晰反馈（比如加边框或背景色）。否则，不是“好看”，是“不可用”。
真正难的不是怎么删下划线，是怎么删得既符合设计意图，又不悄悄把一部分人挡在功能外面。
