直接覆盖bootstrap组件样式需确保自定义css在bootstrap后真实加载，并用组合选择器（如.btn.btn-primary.my-submit）提权至平级，同时优先通过css变量或sass重定义源头变量。
直接覆盖 Bootstrap 组件样式，不是加个 .my-btn 就能生效的——它大概率被 .btn.btn-primary:focus 这类高权重选择器压掉，或者被 !important 或 CSS 变量绕开。
确保自定义 CSS 在 Bootstrap 之后加载且真实生效
顺序错了，后面所有操作都白搭。但光看 HTML 里 <link> 的书写顺序不够，得确认浏览器实际加载行为：
- 打开 DevTools → Network 面板，刷新页面，确认
bootstrap.min.css请求完成（状态码 200）后，custom.css才发起请求 - 如果用了 Webpack/Vite，
@import写在 Sass 文件里，必须保证@import "bootstrap";在你写自定义样式之前；用 JSimport则依赖模块解析顺序，不如显式<link>可控 - Django/Flask 中检查
{% static 'css/custom.css' %}对应路径是否真实存在，404 了就等于没加载
用组合选择器精准提权，别只靠 class 名
Bootstrap 5 的 .btn.btn-primary 特异性是 0,2,0,0；你单写 .my-btn 是 0,1,0,0，天然输一截。更糟的是，它不继承 .btn 的 padding、border-radius，按钮会“塌掉”而不是“换色”。
- 正确写法：
.btn.btn-primary.my-submit—— 复用结构，既拉高权重，又保留所有基础样式 - 想改导航链接 hover 色？写
.navbar-nav .nav-link:hover，而不是.nav-link:hover - 属性选择器更稳：
button[type="submit"].btn比单纯.btn更难被 DOM 变动影响 - 避免
#header .nav .dropdown .btn这类深度嵌套，删个 wrapper 就全失效
优先用 CSS 变量或 Sass 重定义源头
硬写覆盖规则是“打补丁”，改变量才是“动根”。Bootstrap 5.3+ 把大量逻辑移到 :root 变量上，比如 --bs-primary 控制主色，--bs-gutter-x 控制栅格间距。
- 全局改主题色：在
bootstrap.min.css后加<style>:root { --bs-primary: #2c3e50; }</style>，比一堆.btn-primary { background: #2c3e50; }干净十倍 - Sass 场景下，在
@import "bootstrap/scss/bootstrap";前重定义变量，例如：$primary: #2c3e50;，注意只对带!default标记的变量有效 - 拼错变量名（如写成
--primary而非--bs-primary）或漏分号，整行会被浏览器静默忽略，Computed 面板里根本看不到
别忽略 reboot.css 和工具类的“隐身覆盖”
很多“变样了”不是组件问题，而是 bootstrap-reboot.css 在背后重置了原生行为：
-
button、input的默认边框/字体/盒模型全被改过；textarea的resize: both会干掉拖拽手柄 - 工具类如
.text-center、.d-flex内部常带!important，你写.my-section .text-center才能轻松覆盖 -
scroll-behavior: smooth加在html上，会导致 SPA 锚点跳转卡顿，某些路由滚动异常
真正难搞的从来不是哪条样式没生效，而是你改了 A，B 却悄悄变了——因为 reboot 或 variables 已经先动了底层规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
