Bootstrap样式加载顺序至关重要，因CSS按顺序层叠生效，后加载的同优先级规则会覆盖前者；正确顺序应为先引入bootstrap.min.css再引入自定义CSS，否则高特异性选择器将导致自定义样式失效。
为什么Bootstrap的样式加载顺序很重要
因为CSS是按顺序解析、层叠生效的——后加载的同优先级规则，会直接覆盖前面的。Bootstrap的bootstrap.min.css自带大量高特异性选择器（比如.btn.btn-primary），一旦它在你的自定义CSS之后加载，你的.my-button就大概率失效。
怎么确认和调整CSS加载顺序
关键不是“有没有引入”，而是“谁先谁后”。在React项目中，常见错误是把自定义CSS写在index.js顶部，却忘了Bootstrap也是通过import引入的：
- ✅ 正确顺序：
import 'bootstrap/dist/css/bootstrap.min.css';→import './custom.css'; - ❌ 错误顺序：
import './custom.css';→import 'bootstrap/dist/css/bootstrap.min.css'; - 如果用CDN，在
<head>里也得保证<link rel="stylesheet">Bootstrap在前，你的CSS在后 - 注意：Create React App本地开发（
npm start）有时因热更新机制导致顺序“看似正常但实际错乱”，可临时加console.log('CSS loaded')配合Network面板验证真实加载时序
为什么!important不是解药
它能强行压过特异性，但会破坏可维护性，尤其当你后续想用CSS Modules或Tailwind混用时，!important会让调试变成猜谜：
- 比如你写了
.nav-brand { color: red !important; }，结果某天Bootstrap升级，新增了.navbar-brand:focus带!important的规则，反而把你盖掉 - CSS Modules类名哈希化后，
!important依然生效，但你再也无法靠类名定位原始样式来源 - 真正该做的是：用更具体的选择器（如
.my-navbar .navbar-brand）代替!important，既安全又可预测
容易被忽略的“隐式加载”陷阱
你以为只控制了一个地方的导入顺序，但框架或工具链可能悄悄加了别的入口：
-
react-bootstrap组件内部不依赖全局CSS，但如果你同时用了bootstrap.min.css和react-bootstrap，它们的样式逻辑其实是两套，容易互相干扰 - 某些UI库（如
@mantine/core）或主题插件会在运行时动态注入style标签，位置不可控，可能插在你CSS中间 - Vite或Webpack 5+的CSS提取插件（如
mini-css-extract-plugin）在生产构建时会合并CSS，可能打乱你手写的导入顺序——必须检查最终生成的main.css内容来确认
最稳妥的做法，永远是打开浏览器开发者工具的Network面板，过滤css，看文件加载顺序是否和你代码里写的完全一致；顺序对了，80%的“样式不生效”问题就消失了。
