直接写 :hover 有时不生效，因 Bootstrap 5 按钮悬停样式优先级高；需用相同或更高 specificity 选择器（如 .btn.btn-primary:hover）、添加自定义 class 或调整 CSS 加载顺序。
为什么直接写 :hover 有时不生效
Bootstrap 5 的按钮样式（比如 .btn-primary）默认用高优先级选择器定义悬停状态，例如：.btn-primary:hover。如果你的外部 CSS 写成简单的 .btn-primary:hover { background-color: red; }，但没生效，大概率是 CSS 优先级不够——Bootstrap 的规则可能带 .btn、.btn-primary 甚至 body .btn-primary:hover 这类组合，天然比你的单类名选择器权重高。
确保覆盖生效的三种写法（按推荐顺序）
优先选语义清晰、可维护性强的方式，避免无脑加 !important：
- 用和 Bootstrap 相同或更高 specificity 的选择器，比如：
.btn.btn-primary:hover { background-color: #dc3545; }——它复现了 Bootstrap 自身的双类组合，权重一致，稳。 - 如果按钮有自定义 class（如
my-special-btn），直接绑定到该 class 上：.my-special-btn:hover { background-color: #28a745; }，再在 HTML 中写<button class="btn btn-primary my-special-btn"></button>。这样既解耦又可控。 - 仅当上述都不行（比如要全局改所有
.btn-primary悬停色且无法改 HTML 类名），才提升权重：body .btn.btn-primary:hover { background-color: #17a2b8; }。注意别用html body .btn-primary:hover这种过度冗余写法，反而难调试。
必须检查的两个加载顺序问题
CSS 覆盖失败，一半以上是因为加载时机不对：
- 确保你的外部 CSS 文件在 Bootstrap CSS 之后 引入，例如：
<link href="bootstrap.min.css" rel="stylesheet"><br><link href="my-styles.css" rel="stylesheet">
- 如果你用构建工具（Vite/Webpack），确认
@import顺序：在my-styles.css里不要@import 'bootstrap'，否则你的规则会被 bootstrap 覆盖；应该让构建流程保证 bootstrap 先解析、你的 CSS 后解析。
悬停颜色变更后，记得同步处理边框和文字色
Bootstrap 5 的 .btn-primary:hover 不只改背景，还同时调整了 border-color 和 color。如果你只改了 background-color，悬停时可能出现边框突兀、文字看不清等问题：
- 完整覆盖建议写全三项：
.btn.btn-primary:hover {<br> background-color: #0056b3;<br> border-color: #004085;<br> color: #fff;<br>} - 特别注意禁用态（
:disabled）和焦点态（:focus）不受:hover影响，需单独处理，否则交互反馈会断裂。
实际项目里最容易被忽略的是边框与文字色的联动，以及构建环境下 CSS 的实际注入顺序——光看 HTML 里的 <link> 顺序不一定反映最终浏览器解析顺序。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
