自定义css在bootstrap 5中不生效，主因是bootstrap.min.css未成功加载或选择器权重不足；需确认network面板状态码为200、响应体含bootstrap规则，并确保自定义css在bootstrap之后加载且选择器权重足够（如用.c-img替代.carousel-item img）。
自定义CSS在Bootstrap 5中不生效，90%不是你写错了规则，而是它压根没赢过Bootstrap的默认样式——关键卡点就两个：bootstrap.min.css是否真加载了，以及你的选择器有没有足够权重去覆盖它。
检查bootstrap.min.css是否真的加载成功
浏览器控制台里没报错，Network面板里看到文件名，不代表CSS进了样式引擎。必须确认状态码是200，且响应体里真有Bootstrap的规则（比如搜.btn能匹配上）。
-
404：路径写错，常见于本地开发时漏掉static/或dist/前缀 -
403或failed：CDN链接被Markdown、CMS或反爬脚本截断（比如https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/...变成https://cdn） -
rel="sytlesheet"拼错：浏览器静默忽略，Network里根本看不到请求，也不报错 - HTTPS页面引用HTTP资源：现代浏览器直接拦截，显示
Mixed Content警告
确保自定义CSS在Bootstrap之后加载
顺序不是建议，是CSS层叠逻辑的硬性要求。bootstrap.min.css必须是第一个<link>，你的style.css紧随其后。否则所有自定义规则都会被重置样式干掉。
- Django/Vue/React项目里，
@import或import './style.css'的位置不决定最终顺序，只看HTML中<link>的实际位置 - 用Webpack/Vite构建时，如果CSS被打包进JS，要确认提取插件（如
mini-css-extract-plugin）生成的<link>标签仍在Bootstrap之后 - 别信“我明明放后面啦”——右键“查看网页源代码”，手动数
<link>标签顺序
用对选择器，别输给Bootstrap的权重
.carousel-item img这种写法 specificity 是 0,2,1，而Bootstrap很多地方用.carousel-item > img甚至加!important，你自然赢不了。
- 改用带自定义class的方式：
<img class="c-img">，再写.c-img { height: 100%; object-fit: cover; } - 避免以
img、button等元素开头的选择器，哪怕加了父级class，也容易被更具体规则压制 - 不要加
!important来“快速修复”——它会掩盖真实问题，后续维护时你会在Styles面板里看到一排划掉的规则，却不知道谁在控制它 - 打开Elements面板，选中目标元素，右侧Styles里找你的规则：没出现＝没匹配；出现但被划掉＝被更高权重覆盖
结构和类名必须和Bootstrap 5完全一致
Bootstrap 5不认近似写法。少一个连字符、多一层嵌套、换一个单词，样式链就断了。
-
.carousel-item不能写成.c-item、.item或.carousel__item - 栅格必须严格
container→row→col三层，<div class="container"><div class="col-6">直接失效 <li>表单验证要加<code>novalidate属性，否则:invalid伪类不触发，.is-invalid样式也不会生效 - Modal、Dropdown等组件必须用
data-bs-toggle，data-toggle在v5中完全无效
真正拖慢调试的，从来不是“怎么写CSS”，而是花三分钟看一眼Elements面板里的Styles栏——那里清清楚楚写着哪条规则赢了、哪条被干掉了、来源是哪个文件第几行。比反复改代码快得多。
