最可靠方法是直接加 text-decoration-none 类，因 bootstrap 5.3+ 已内置该工具类，带 !important 且能覆盖高权重规则；单纯 a { text-decoration: none } 失效是因被 bootstrap 更高权重选择器覆盖。
直接加 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 高；而 .nav-link 还自带 text-decoration: none !important，但只对自身生效——你写的 a 规则根本进不去它的作用域。
- 用浏览器开发者工具的 “Computed” 面板查最终生效的
text-decoration来源，别猜 -
a[href]比a更精准，避免误杀语义错误的a:not([href]) - Vue/React 单文件组件启用
scoped时，必须用:deep(a)（Vue 3）或/deep/ a（旧版）穿透作用域
.nav-link 去下划线必须针对性覆盖
.nav-link 是独立组件类，它自己定义了 text-decoration，且优先级远高于普通 a 选择器。只写 a 规则完全无效。
- 正确写法：
.nav-link { text-decoration: none !important; } - 如果用了
.btn.btn-link > a结构，补一句：.btn.btn-link > a { text-decoration: none !important; } - 响应式折叠菜单展开后，需额外覆盖：
.navbar-collapse .nav-link { text-decoration: none !important; } - 深色模式下，加前缀：
.navbar-dark .nav-link { text-decoration: none !important; }
去掉下划线后，视觉反馈不能丢
纯文字链接没了下划线，又没足够颜色对比或交互反馈，对屏幕阅读器用户和色觉障碍者就是隐形陷阱。
- 确保
a与正文文字的对比度 ≥ 4.5:1（可用 axe 或 WAVE 工具验证） - 必须提供
a:hover和a:focus的明确视觉反馈，比如加边框、背景色，或恢复下划线（用text-decoration-underline-hover） - 语义上无
href的“假链接”，不该用a，改用<button role="link"></button>，天然无下划线且可访问性合规
真正麻烦的从来不是“怎么删”，而是删完之后谁还看得出那是链接——这点在响应式断点切换、焦点管理、无障碍测试里最容易露馅。
