根本原因是加载顺序决定层叠位置，而非选择器权重；bootstrap css必须在自定义css之前引入，否则同选择器下后加载者覆盖前者。
为什么 Bootstrap 的 btn 类样式总被后面引入的 CSS 覆盖？
根本原因是 CSS 优先级计算中，**加载顺序决定层叠位置**，而非文件路径或命名。Bootstrap 的 CSS 如果后加载（比如放在自定义 CSS 之后），它的规则就会被前面同选择器的样式覆盖——哪怕它本身权重更高。.btn 被你写的 .btn { color: red; } 覆盖，不是因为你的选择器更强，而是因为你这行代码在 DOM 中解析得更晚。
常见错误现象：!important 滥用、反复刷新才偶尔生效、开发环境正常但构建后失效（打包工具重排了引入顺序）。
- 检查 HTML 中
<link>标签顺序：Bootstrap CSS 必须在所有自定义 CSS 之前 - Webpack/Vite 等构建工具中，确认
import 'bootstrap/dist/css/bootstrap.min.css'出现在自定义样式import './custom.css'之前 - 避免在
<style></style>标签里写覆盖规则——它默认插入到 head 末尾，天然晚于外部 CSS
如何安全地覆盖 Bootstrap 的 btn-primary 颜色而不破坏其他状态？
直接重写 .btn-primary 容易漏掉 :hover、:focus、:disabled 等伪类，导致交互异常。Bootstrap 5+ 使用 CSS 自定义属性（CSS variables）提供官方扩展入口，这才是推荐路径。
正确做法是利用其变量体系，在 Bootstrap 引入之后、自定义样式之前，注入修改：
:root {
--bs-btn-color: #2c3e50;
--bs-btn-bg: #3498db;
--bs-btn-border-color: #2980b9;
--bs-btn-hover-bg: #2980b9;
--bs-btn-hover-border-color: #1c6ea4;
}
这样所有基于这些变量的按钮状态都会同步更新，且不增加选择器权重，不干扰原有优先级逻辑。
- 变量名以
--bs-开头，完整列表见 Bootstrap 官方_variables.scss - 不要在
:root外部覆盖变量，否则可能被后续 reset 覆盖 - 若用 Sass，应在
@importBootstrap 前定义变量，效果等价但更早介入
使用 !important 临时修复时，哪些地方绝对不能加？
!important 是紧急兜底手段，但它会破坏可维护性，尤其在组合选择器中极易引发连锁覆盖问题。
以下场景加 !important 会导致隐性故障：
-
.btn.btn-lg !important—— 覆盖了整个复合选择器，后续任何针对.btn-lg的调整都失效 - 媒体查询内使用
!important—— 可能导致响应式断点失效（浏览器解析顺序混乱） - 与 JavaScript 动态设置的内联样式冲突，例如
el.style.color = 'red'会被!important阻断
如果必须用，只允许出现在单类名、无伪类、无媒体查询的原子规则里，例如：.my-btn { background-color: #e74c3c !important; }
Vue/React 项目中局部样式为何仍被 Bootstrap 全局样式穿透？
即便用了 <style scoped></style> 或 css modules，Bootstrap 的全局选择器（如 .btn）仍可能通过 CSS 优先级胜出——因为 scoped 生成的属性选择器（如 .btn[data-v-f3f3eg]）权重虽高，但若 Bootstrap 规则包含更多类（如 .btn.btn-primary），它仍可能赢。
真正可靠的解法不是拼权重，而是隔离作用域：
- Vue：对第三方组件显式添加
class="no-bootstrap"，再用属性选择器重置：[class~="no-bootstrap"] .btn { all: unset; } - React：用 CSS-in-JS 库（如 Emotion）的
Global组件，把 Bootstrap 限制在特定容器内：<div classname="bootstrap-scope">...</div>，再写.bootstrap-scope .btn { ... } - 通用底线：避免在同一个 DOM 区域混用 Bootstrap 组件和高度定制 UI，物理隔离比样式对抗更可靠
最常被忽略的点：CSS 变量方案只在 Bootstrap 5+ 有效；Bootstrap 4 不支持变量覆盖，必须走 Sass 重编译或谨慎提升选择器权重。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
