Bootstrap覆盖自定义CSS的根本原因是CSS加载顺序错误和选择器特异性不足，需确保Bootstrap CSS import在前、自定义CSS在后，并通过提高选择器权重而非滥用!important来解决。
因为CSS按顺序层叠生效，后加载的同优先级规则会直接覆盖前面的——Bootstrap自带大量高特异性选择器（比如.btn.btn-primary），如果你的custom.css在它之前加载，几乎必然被压制。
浏览器解析CSS的顺序就是样式生效的顺序
浏览器从上到下读取<head>里的<link>标签，每遇到一个CSS文件就暂停HTML解析、下载并应用其中的规则。这意味着：
- 先加载
bootstrap.min.css→ 所有默认样式就位 - 再加载
custom.css→ 你的规则才有机会“站上顶层”去覆盖 - 如果顺序反了，你的
.c-img可能连开发者工具里都看不到声明，因为它根本没赢过Bootstrap的.carousel-item img
React项目里import顺序错乱比HTML更隐蔽
在Create React App或Vite中，import语句的执行顺序决定CSS注入顺序，但热更新、代码分割或第三方库可能悄悄打乱它：
- ❌ 错误写法：
import './custom.css';写在import 'bootstrap/dist/css/bootstrap.min.css';前面 - ✅ 正确写法：确保Bootstrap CSS import永远在最前，自定义CSS紧随其后
- ⚠️ 隐患点：某些UI库（如
@mantine/core）会在运行时动态插入<style>标签，位置不可控，可能插在你两个CSS中间 - 验证方法：打开开发者工具→Network面板→过滤
css，看实际加载顺序是否和代码一致
为什么!important不是可靠解法
加!important确实能强行压过特异性，但它会破坏后续维护和协作：
立即学习“前端免费学习笔记（深入）”；
- 当你引入CSS Modules或Tailwind时，
!important会让调试变成猜谜 - 多个
!important堆叠后，谁覆盖谁又得重新算权重，反而更难预测 - Bootstrap 5部分组件内部JS逻辑依赖CSS类名（比如
.show控制显示），硬盖样式可能让交互失效 - 真正该花时间的地方，是确认加载顺序 + 用更高权重的选择器（比如
.my-btn.c-btn而非button）
最容易被忽略的是“隐式加载”——你以为只控制了一个import，但框架、插件、甚至构建工具的CSS提取逻辑（如mini-css-extract-plugin）都在暗处影响最终注入顺序。打开Network面板看真实加载流，比反复改CSS更有效。
