自定义CSS必须放在Bootstrap之后，但仅靠顺序无法保证覆盖，需满足特异性、来源和重要性均相同；否则仍会失效，根本原因常是特异性不足、文件未加载或选择器不匹配。
自定义CSS必须放在Bootstrap之后，但顺序不是万能解药
加载顺序只是前提，不是充分条件。浏览器确实按 <link> 出现顺序解析样式表，但「后加载就能覆盖」只在特异性（specificity）、来源（origin）和重要性（!important）完全相同时才成立。Bootstrap 大量使用高特异性规则（如 #app .btn、.navbar .navbar-brand），你只写 .btn 或 .navbar-brand，哪怕放最后也赢不了。
为什么顺序错了就一定失效？看这三类典型场景
常见错误不是“没放后面”，而是“放后面了却没生效”，原因集中在：
- 你的
style.css文件路径 404 或返回空内容——Network 面板里点开它，响应体里搜不到.carousel-item就说明白写了也白搭 - Django/Flask 等框架中用了
{% static 'css/style.css' %}，但实际文件未部署或权限受限，服务端返回 404 或 500 - React/Vue 项目中把
import './style.css'写在组件内部，导致 CSS 被 scoped 或注入时机错乱，实际并未进入 document.head
怎么验证顺序真的起作用？别猜，看 DevTools
打开 Elements 面板，选中目标元素（比如一个 <button class="btn">），右侧 Styles 面板会列出所有匹配的规则。重点看：
- 你的自定义规则是否出现在列表里？没出现 → 文件没加载 / 类名拼错 / 语法错误导致整段被忽略
- 是否被划掉（strikethrough）？被划掉 → 特异性更低或带
!important的 Bootstrap 规则赢了 - Source 列显示来自哪个文件？确认是你的
style.css，而不是某个内联 style 或 JS 注入的样式
真正卡住人的，从来不是“放哪”，而是“有没有被看见”
很多人花半小时调顺序，不如花十秒点开 Elements → Styles → 找到那个元素，盯着那几行规则看：它读到了吗？它匹配了吗？它被干掉了还是根本没上场？!important 是最懒的解法，也是未来维护时第一个要删掉的东西——它掩盖的是选择器设计缺陷，不是样式问题本身。
立即学习“前端免费学习笔记（深入）”；
