Bootstrap链接下划线删不掉是因为其样式含!important且层级更高，需用text-decoration-none类、提高选择器权重或覆盖组件级规则（如.nav-link）来解决。
Bootstrap链接下划线为什么删不掉
不是text-decoration: none没生效，而是Bootstrap的样式带!important，且层级压过了你的自定义规则。常见现象是：写了a { text-decoration: none; }，刷新后下划线还在；用开发者工具看，发现Bootstrap的a规则后面标着!important，或者你的样式被划掉。
- Bootstrap 5 默认在
_reboot.scss里对a设了text-decoration: underline，且部分主题变体（如bootstrap.min.css）会内联!important - 如果你用的是CDN引入的压缩版CSS，直接覆盖需提高选择器权重或加
!important - 某些组件（如
.nav-link、.dropdown-item）自己也定义了text-decoration，得单独处理
去掉全局链接下划线的稳妥写法
别只靠a { text-decoration: none !important; }——它会影响所有链接（包括按钮里的a、跳转图标等），且破坏可访问性。更合理的是按需清除，或用Bootstrap自带的工具类。
- 优先用Bootstrap 5+ 提供的
text-decoration-none类：<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="text-decoration-none">无下划线链接</a> - 若需全局关闭，把规则放在Bootstrap CSS之后，并提高权重：
a:not([href]):not([class*="btn"]) { text-decoration: none; }，避免误杀按钮和空链接 - 使用CSS Custom Properties时，可重置
--bs-link-decoration变量（仅限Bootstrap 5.3+）：:root { --bs-link-decoration: none; }
清除特定组件内链接下划线（如导航栏、下拉菜单）
Bootstrap的.nav-link、.dropdown-item、.list-group-item这些组件内部的a，往往有独立样式，直接写a选择器无效。
-
.nav-link { text-decoration: none; }—— 覆盖导航项链接 -
.dropdown-item { text-decoration: none; }—— 清除下拉菜单项 - 如果用了
.btn包裹a，要同时处理：.btn > a { text-decoration: none; } - 注意响应式断点：某些下划线只在
@media (hover: hover)下出现，移动端可能默认无下划线，但悬停态仍存在
为什么有时候加了!important还是不生效
根本原因常是CSS加载顺序或作用域隔离问题，尤其在Vue/React单文件组件中。
立即学习“前端免费学习笔记（深入）”；
- Vue的
<style scoped>会让你的规则带上属性选择器（如a[data-v-abc123]），而Bootstrap规则没这个属性，权重反而更高 - 解决办法：去掉
scoped，或改用:deep(a) { text-decoration: none !important; }（Vue 3） - React中若用CSS Modules，同理需用
:global(.nav-link) { text-decoration: none; } - 检查是否被其他CSS框架（如Tailwind）的
underline类覆盖，这类类名会直接写进HTML，优先级极高
