直接加 text-decoration-none 类即可，bootstrap 5.3+ 内置该类，带 !important 且覆盖 a:hover/focus 及高权重组件规则；手动写 a { text-decoration: none } 常因选择器权重低或层叠顺序失效；组件内链接需针对性覆盖；scoped 组件需穿透样式；删除下划线后须保障可访问性。
直接加 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 }，浏览器仍可能按层叠顺序选中那条原生规则——结果看似“去掉了”，但你的样式根本没“生效”。
用开发者工具的 “Computed” 面板查最终生效的 text-decoration 来源，比猜更可靠。
组件内链接（如 .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"></button>，天然无下划线且可访问性合规
真正麻烦的从来不是“怎么删”，而是删完之后谁还看得出那是链接——这点在响应式断点切换、焦点管理、无障碍测试里最容易露馅。
