直接加 a { text-decoration: none } 大概率失效，因 bootstrap 5 的 a:not([href]):not([class]) 规则权重更高；应改用 body a[href] { text-decoration: none } 并确保自定义 css 在 bootstrap 后加载，同时兼顾可访问性反馈。
直接加 a { text-decoration: none } 大概率失效，不是写错了，而是被 Bootstrap 5 内置的高权重规则盖掉了。
为什么全局重置 a 样式常常没反应
Bootstrap 5 在 _reboot.scss 中定义了类似这样的规则：a:not([href]):not([class]) { text-decoration: none; }。它的选择器权重（2 个伪类 + 1 个属性）高于单纯 a，哪怕你加了 !important，浏览器仍可能按层叠顺序优先采用这条规则——结果看似“去掉了”，但你的样式根本没参与计算。
- 用浏览器开发者工具的 “Computed” 面板查最终生效的
text-decoration来源，别猜 -
a[href]比a更精准，能避开误杀无 href 的语义错误链接（如<a>文本</a>） - 如果项目用了 Sass 编译，确保自定义 CSS 在 Bootstrap 主文件之后引入，否则白写
真正有效的全局重置写法（不堆 !important）
提升选择器权重是关键，而不是盲目加 !important。以下写法经实测在 Bootstrap 5.3+ 中稳定生效：
body a[href] {
text-decoration: none;
}
/* 或更稳妥的 */
.my-app a[href] {
text-decoration: none;
}
-
body a[href]权重足够压过 Bootstrap 多数默认规则，且只作用于有真实跳转能力的链接 - 避免用
html a或div a这类泛化选择器，易引发意外交互（比如影响第三方组件内部的a） - 如果用了 Vue/React 的 scoped 样式，需用
:deep(a[href])（Vue 3）或/deep/ a[href]（旧版）穿透作用域
去掉下划线后，最常被忽略的可访问性陷阱
纯文字链接没了下划线，又没颜色对比或交互反馈，对屏幕阅读器用户和色觉障碍者就是隐形的。这不是“样式问题”，是合规红线。
- 确保
a与正文文字的对比度 ≥ 4.5:1（可用 axe 浏览器插件快速验证） - 必须提供明确的
a:hover和a:focus反馈，比如：a:hover { color: #0d6efd; text-decoration: underline; }或加outline/border-bottom - 语义上无跳转意图的“假链接”，不该用
<a></a>，改用<button role="link"></button>，天然无下划线且可访问性合规
真正麻烦的从来不是“怎么删”，而是删完之后谁还看得出那是链接——这点在焦点管理、响应式断点切换、无障碍测试里最容易露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
