Bootstrap 5.3+ 推荐直接使用 text-decoration-none 类去除链接下划线，它已预设覆盖 hover/focus 状态且含 !important，适用于任意元素但语义上仅限可交互链接；全局禁用需提升选择器权重如 body a 或 a[href]，组件内链接须针对性覆盖；去下划线后必须保障可访问性，包括足够对比度、hover/focus 反馈及避免 outline: none。
直接用 text-decoration-none 类最省事
Bootstrap 5.3+ 内置了 text-decoration-none 工具类，它已预设覆盖 a:hover 和 a:focus 状态，无需额外写 CSS。加在链接上就生效：
<a href="#" class="text-decoration-none">无下划线链接</a>
这个类内部用了 !important，能压过 Bootstrap 自身的 .nav-link:hover、[data-bs-toggle]:hover 等高权重规则。不用自己猜选择器权重，也不用改加载顺序。
注意：它不只适用于 a 标签，也可用于 span、div 等任意元素——但语义上，仅对可交互的链接使用才合理。
全局禁用时为什么 a { text-decoration: none } 常常失效
不是规则没写，而是被更高权重的选择器盖掉了。比如 Bootstrap 5 的源码里实际存在类似这样的规则：
a:not([href]):not([class]) { text-decoration: none; }
它的选择器权重（2个伪类 + 1个属性）比单纯一个 a 高得多。所以即使你写了 a { text-decoration: none !important }，也可能被这条规则“反向覆盖”——因为它的 text-decoration 值是 none，而你的 !important 只是把 underline 改成 none，结果一样，但浏览器按层叠顺序选中了更具体的那条。
- 检查开发者工具的 “Computed” 面板，看最终生效的
text-decoration来自哪条规则 - 若要全局控制，推荐用
body a或.my-app a提升权重，而非盲目堆!important - 避开误伤：用
a[href]限定只处理真实链接，a:not([href])本就不该有下划线，语义上应改用button
组件内链接（如 .nav-link、.dropdown-item）要单独处理
这些组件内部的 a 标签，样式由组件级 CSS 控制，比如 .nav-link 自带 text-decoration: underline，且 hover 时再强化。只写 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（旧版）穿透作用域，否则样式不生效。
去掉下划线后，可访问性风险比想象中更实在
纯黑色文字 + 无下划线 + 无 hover/focus 变化 = 对色觉障碍者和屏幕阅读器用户几乎不可见。WCAG 明确要求链接必须提供非颜色依赖的视觉标识。
别只盯着“去掉下划线”这一步，后续动作缺一不可：
- 确保
a与正文文字的对比度 ≥ 4.5:1（例如深蓝#0d6efd而非浅灰） - 给
a:hover和a:focus加明确反馈：边框、背景色、或恢复下划线（用text-decoration-underline-hover工具类） - 绝不能写
outline: none—— 键盘用户靠它定位焦点，可用outline: 2px solid #0d6efd; outline-offset: 2px;优化样式 - 父容器若设了
text-decoration: underline，子a的text-decoration: none会被继承干扰，此时需同步加text-decoration-skip-ink: none
真正难的不是“怎么去掉”，而是“去掉之后，如何让所有人依然清楚地知道这是个可点击的东西”。
