Bootstrap CSS必须在自定义CSS之前加载，否则同选择器下后加载者直接覆盖前者；需检查中顺序、构建工具注入行为及浏览器实际生效规则。
检查标签顺序是否颠倒
Bootstrap CSS 必须在所有自定义 CSS 之前加载，否则同选择器下后加载的规则会直接覆盖前者——这不是权重问题，而是浏览器层叠机制的确定性行为。bootstrap.min.css 放在 app.css 后面，.btn 就永远被你的 .btn { color: red; } 覆盖不了。
- 打开开发者工具 → Elements → 查看
中<link rel="stylesheet">的排列顺序 - 确认
bootstrap.min.css（或bootstrap.css）排在第一位，自定义样式文件紧随其后 - 避免在
末尾用 JS 动态插入<link>，它默认追加到末尾，天然晚于静态引入 - 临时删掉其他 CSS 文件，只留 Bootstrap 和你的样式，刷新验证是否恢复
Webpack/Vite 中 import 顺序错乱
即使 HTML 里顺序正确，构建工具可能打乱实际注入顺序。Vite 默认把 CSS-in-JS 或 @import 生成的样式插入 最后；Webpack 的 style-loader 也默认追加，不保证与 HTML 一致。
- Vite 用户：检查
vite.config.ts是否启用了css.preprocessorOptions或插件自动注入，这类逻辑常绕过手动顺序 - React 项目中若用
styled-components或emotion，它们的样式表默认动态挂载，需用CacheProvider指定插入位置 - 确保
import 'bootstrap/dist/css/bootstrap.min.css'出现在import './custom.css'之前，且两者都在入口文件（如main.tsx）顶部 - Vue SFC 中
<style scoped></style>写的.btn根本不会生效——因为.btn是全局类，不在该组件节点内
用 CSS 变量安全覆盖而非 !important
直接重写 .btn-primary 容易漏掉 :hover、:focus、:disabled 等状态，导致交互异常；!important 则破坏可维护性，尤其在组合选择器中引发连锁覆盖。
- Bootstrap 5.3+ 支持官方变量体系，优先改
--bs-btn-bg、--bs-btn-color等--bs-前缀变量 - 变量必须在 Bootstrap CSS 加载之后、自定义样式之前注入：
<style>:root { --bs-btn-bg: #3498db; }</style> - 若用 Sass，在
@import "bootstrap/scss/variables"之前定义$primary等变量，利用!default机制 - 不要在
:root外部覆盖变量，否则可能被后续 reset 覆盖；也不要在body上写无 class 限定的overflow: hidden，会破坏模态框关闭逻辑
第三方库导致的隐式覆盖
Element Plus、Tailwind 等库自带重置样式或同名工具类，会与 Bootstrap 全局类冲突，且这种覆盖常发生在构建阶段，开发时难察觉。
- Tailwind 需在
tailwind.config.js中启用important: true，并用@layer base控制基础样式注入时机 - Element Plus 建议按需引入 +
<style scoped></style>封装，禁用其自带 reset，改用base.css+ 单组件样式 - 检查开发者工具中被划掉的样式来源：如果
.el-input__inner被.form-control覆盖，说明 Bootstrap CSS 实际加载更晚，或选择器权重更高 - 不要依赖“我改了应该生效”，强制刷新（
Ctrl + F5）并勾选 Network 面板的Disable cache
真正容易被忽略的是：CSS 加载顺序不是“写在 HTML 里就一定生效”，它会被构建工具、CSS-in-JS、scoped 样式、动态插入等环节悄悄改写。验证时别只看 HTML 源码，得盯住开发者工具里 Styles 面板中实际生效的规则来源和 strikethrough 状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
