直接加 a { text-decoration: none; } 失效是因为 bootstrap 的 .nav-link 等选择器权重更高，且部分规则含 !important；应优先使用内置 text-decoration-none 类，必要时用 !important 覆盖，并确保可访问性反馈。
直接加 a { text-decoration: none; } 为什么经常失效
不是语法错，是权重被压。Bootstrap 5 的 .nav-link、.dropdown-item、.btn-link 都自带 text-decoration: underline;，且选择器权重远高于单纯一个 a。更麻烦的是，CDN 版本的 bootstrap.min.css 里部分 a 规则带 !important，而你没加，自然被盖掉。Vue/React 的 <style scoped></style> 还会让你的规则变成 a[data-v-xxx]，权重反而更低。
优先用 text-decoration-none 类，别手写 CSS
Bootstrap 5.3+ 内置的 text-decoration-none 是最省心的选择——它不只是设 none，还预置了 :hover 和 :focus 下的统一清除逻辑，避免漏掉状态导致下划线“闪现”。
- 单个链接：
@#@#@#@#@#@#@#@#@#@0 - 整组导航：
<ul class="navbar-nav"><li class="nav-item">@#@#@#@#@#@#@#@#@#@1</li></ul> - 需要悬停恢复？加
text-decoration-underline-hover：class="text-decoration-none text-decoration-underline-hover"
必须手动覆盖时，怎么写才不翻车
当 text-decoration-none 仍无效（比如碰上 .btn.btn-link > a 或自定义组件），就得针对性覆盖：
-
.nav-link { text-decoration: none !important; }—— 覆盖导航项 -
.dropdown-item { text-decoration: none !important; }—— 清除下拉菜单项 -
.btn.btn-link > a { text-decoration: none !important; }—— 处理按钮式链接 - 若用 Sass 编译，改
$link-decoration: none;更彻底，但注意它只影响基础状态，:hover还得单独配
全局重置前先问自己三个问题
真要全站关掉下划线？先确认：
- 是否所有链接都满足可访问性：颜色对比度 ≥ 4.5:1？
a:focus和a:hover是否有足够视觉反馈（比如变色、边框、阴影）？ - 是否误伤了语义不该去下划线的元素？比如
<button role="link"></button>或图标链接 - CSS 加载顺序是否正确？自定义样式必须放在 Bootstrap CSS 之后，否则白写
最常被忽略的是：下划线不只是装饰，它是残障用户识别可点击内容的关键线索。删之前，先补好替代反馈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
