Bootstrap 5 中 a 标签下划线需用高优先级 CSS 覆盖，推荐使用 text-decoration-none 工具类或 a { text-decoration: none !important; } 配合 hover/focus 状态清除，优先通过开发者工具“Computed”面板定位生效规则。
Bootstrap 5 中 a 标签下划线去不掉？优先检查 text-decoration 是否被覆盖
Bootstrap 5 默认给所有 a 标签设置了 text-decoration: underline（悬停时更明显），但它的样式权重高，直接在元素上写 style="text-decoration: none" 可能无效——因为 Bootstrap 的 :hover 或 :focus 规则会重新激活下划线。
- 必须用足够优先级的 CSS 覆盖，推荐使用
a:not([href])这类选择器避开链接语义干扰，或加!important（仅限快速验证） - 如果用了 Bootstrap 的
link-dark、link-primary等工具类，它们内部也带text-decoration声明，需一并覆盖 - 检查浏览器开发者工具中“Computed”面板，确认最终生效的
text-decoration值来源，别只看“Styles”里你写的那条
全局禁用链接下划线：用自定义 CSS 覆盖 Bootstrap 的默认规则
最稳妥的方式是写一条比 Bootstrap 更具体的选择器，在你的 CSS 文件末尾（或 <style> 块底部）注入：
a {
text-decoration: none !important;
}
a:hover,
a:focus {
text-decoration: none !important;
}
注意：!important 在这里不是偷懒，而是对抗 Bootstrap 5 中类似 .nav-link:hover、a[data-bs-toggle]:hover 这类高权重规则的必要手段。若项目用 Sass，可改 $link-decoration 变量后重新编译，但多数人直接覆盖更快。
只想去掉某类链接的下划线？用工具类或语义化 class 更安全
硬写全局规则容易误伤导航、分页等需要下划线的场景。更推荐按需控制：
立即学习“前端免费学习笔记（深入）”；
- 给特定链接加自定义 class，比如
class="no-underline"，再配 CSS：.no-underline { text-decoration: none !important; } - Bootstrap 5.3+ 提供了
text-decoration-none工具类，直接写<a href="#" class="text-decoration-none">文本</a>即可，它已预设了 hover/focus 状态下的统一清除 - 如果链接实际无
href（比如用onclick模拟按钮），语义上不该用a，改用button+role="link"，天然无下划线且可访问性更好
Vue / React 组件里动态控制？别忘了内联样式和 class 绑定的优先级陷阱
框架里用 :style="{ 'text-decoration': 'none' }" 或 :class="{ 'text-decoration-none': isPlainLink }" 是常见做法，但要注意：
- 内联样式（
style）优先级高于普通 class，但低于带!important的外部 CSS —— 如果你引入的 Bootstrap CSS 在组件 style 之后加载，内联样式仍可能被覆盖 - React 中用
className="text-decoration-none"没问题；Vue 中若用class="text-decoration-none"静态写死，要确保该工具类已正确加载（检查是否漏引 Bootstrap CSS 或版本不匹配） - 服务端渲染（SSR）或 CSS-in-JS 方案下，样式注入顺序更难控，建议统一走 CSS 文件覆盖，而非依赖运行时 class 切换
真正麻烦的从来不是写一行 text-decoration: none，而是搞清它在哪一层被谁悄悄加回来——多看一眼开发者工具里的“Computed”，比翻十遍文档管用。
