Bootstrap 5.3+ 推荐直接使用 text-decoration-none 类移除链接下划线，它已预设覆盖 hover/focus 状态且含 !important；全局禁用需提升选择器权重如 body a 或 a[href]，组件内链接须针对性覆盖，去下划线后必须保障可访问性。
直接加 text-decoration-none 类最省事，bootstrap 5.3+ 已内置该工具类，它同时清除 a:hover 和 a:focus 的下划线，且带 !important，能压过 .nav-link:hover、[data-bs-toggle]:hover 等高权重规则。
为什么 a { text-decoration: none } 常常失效
不是没写，而是被 Bootstrap 自身更高权重的选择器覆盖了。比如源码中实际存在：
a:not([href]):not([class]) { text-decoration: none; }
它的选择器权重（2 个伪类 + 1 个属性）比单纯 a 高，即使你写了 a { text-decoration: none !important }，浏览器仍可能按层叠顺序选中那条规则——结果都是 none，但你的样式根本没“生效”。
- 用开发者工具的 “Computed” 面板查最终生效的
text-decoration来源 - 全局控制推荐提升选择器权重，如
body a或.my-app a，而非盲目堆!important -
a[href]比a更精准，避免误杀a:not([href])这类语义错误用法
组件内链接（如 .nav-link、.dropdown-item）怎么去下划线
这些组件自己定义了 text-decoration，且优先级远高于普通 a 选择器。只写 a 规则完全无效。
- 针对性覆盖：
.nav-link, .dropdown-item, .list-group-item a { text-decoration: none !important; } - 如果用了
.btn.btn-link > a，补一句：.btn.btn-link > a { text-decoration: none !important; } - Vue/React 单文件组件启用
scoped时，需用:deep(a)（Vue 3）或/deep/ a（旧版）穿透作用域
去掉下划线后，可访问性容易被忽略
纯文字链接没了下划线，又没足够颜色对比或交互反馈，对屏幕阅读器用户和色觉障碍者就是隐形陷阱。
- 确保
a与正文文字的对比度 ≥ 4.5:1（可用 axe 或 WAVE 工具验证） - 必须提供
a:hover和a:focus的明确视觉反馈，比如加边框、背景色或恢复下划线（text-decoration-underline-hover） - 语义上无
href的“假链接”，不该用a，改用button+role="link"，天然无下划线且可访问性合规
真正麻烦的从来不是“怎么删”，而是删完之后谁还看得出那是链接——这点在响应式断点切换、焦点管理、无障碍测试里最容易露馅。
