全局设置 a { text-decoration: none; } 易误伤按钮内链接、导航组件等，破坏可访问性；应按需使用 Bootstrap 的 text-decoration-none 类或精准选择器覆盖。
直接加 a { text-decoration: none; } 是最危险的“一步到位”——它会干掉所有链接的下划线，包括按钮里的 <a>、分页控件、导航菜单，甚至破坏可访问性反馈。
为什么全局设置 a { text-decoration: none; } 容易出问题
Bootstrap 5 的默认链接样式本身就很克制（仅在 <a href> 上加下划线），但它的组件如 .nav-link、.dropdown-item、.btn-link 都自带独立的 text-decoration 规则。你写一条全局 a 选择器，既压不垮这些高权重组件规则（除非加 !important），又会误伤本不该动的地方：
- 用
<button role="link">模拟链接的元素，语义上不该有下划线，但被你的a规则完全无视 -
<a>包裹图标或图片时（比如社交图标栏），下划线会穿出容器边界，视觉难看 - 屏幕阅读器依赖下划线 + 颜色变化作为可点击提示，全关后对残障用户不友好
- Vue/React 中动态渲染的
<a>可能因 CSS Modules 或 Scoped Style 被隔离，你的全局规则根本没生效
真正该用的方案：按需加 text-decoration-none 类
Bootstrap 5.3+ 内置的 text-decoration-none 是目前最安全、最轻量、也最符合框架设计逻辑的方式。它不只是设 none，还预置了 :hover 和 :focus 的统一清除逻辑，避免手动补漏。
- 单个链接：
<a href="#" class="text-decoration-none">无下划线链接</a> - 整组导航：
<ul class="navbar-nav"><li class="nav-item"><a href="#" class="nav-link text-decoration-none">首页</a></li></ul> - 配合悬停恢复（推荐）：
class="text-decoration-none text-decoration-underline-hover"—— 默认无下划线，鼠标移入才显示，兼顾简洁与反馈 - 用在非
<a>元素上也合法：<span class="text-decoration-none">纯文本</span>，Bootstrap 明确支持
必须手动覆盖的场景：组件级规则优先级太高
当你发现加了 text-decoration-none 还是有下划线，大概率是碰上了 Bootstrap 组件自己写的高权重规则，比如：
立即学习“前端免费学习笔记（深入）”；
-
.nav-link在_nav.scss里写了text-decoration: none !important;？不，它其实写的是text-decoration: none;，但后面又跟了&:hover { text-decoration: underline; }—— 所以你得同时处理 hover 状态 -
.dropdown-item默认就有text-decoration: none;，但它可能被父级.dropdown-menu的字体颜色或 padding 干扰，让你误以为“还有下划线” - 用
.btn > a套链接时，.btn自带text-decoration: none;，但若你自定义了.btn样式，反而可能把这行覆盖掉了
此时应写更具体的选择器，例如：
.nav-link,
.dropdown-item,
.btn > a {
text-decoration: none;
}
.nav-link:hover,
.dropdown-item:hover {
text-decoration: none;
}
最后提醒一个真·隐形坑：CSS 加载顺序和作用域
很多人在 Vue 单文件组件里写 <style scoped>，然后加 a { text-decoration: none; }，结果完全无效——因为 scoped 会给 a 加属性选择器，而 Bootstrap 的 CSS 没有，两者根本不匹配。这时候要么去掉 scoped，要么把规则写进全局样式（assets/css/app.css），且确保它在 Bootstrap CSS 之后引入。Sass 用户更简单：$link-decoration: none; 直接改变量，一劳永逸，但只影响新编译的 CSS，旧构建不会变。
