Bootstrap 4 样式冲突本质是解析顺序、选择器特异性和 Shadow DOM 作用域问题；应通过 Sass 重编译、调整加载顺序、显式注入样式表及合理使用工具类控制来解决，而非滥用 !important。
Bootstrap 4 的样式冲突不是“能不能覆盖”的问题，而是“谁先被浏览器解析、谁的规则更具体、谁在 Shadow DOM 里根本进不去”的实际执行问题。直接改 !important 或堆砌选择器只会让维护变难，真正要动的是加载顺序、作用域边界和编译逻辑。
为什么你的自定义 CSS 总是被 Bootstrap 覆盖？
常见现象：.my-btn 写了背景色，但按钮还是 Bootstrap 的蓝色；body 字体设了 'Inter'，结果页面用的仍是 -apple-system。这不是你写错了，而是：
- Bootstrap 4 的 CSS 文件（如
bootstrap.min.css）在中靠前引入，你的custom.css在它后面——但若你用的是import方式（比如在 SCSS 里@import "custom"），反而可能被提前编译，导致权重更低 - Bootstrap 大量使用组合类（如
.btn.btn-primary），而你的单类.my-btn特异性（specificity）天然更低 - 某些重置规则（如
button { margin: 0; }）在 Bootstrap 的_reboot.scss里，它比你写的通用button规则更早生效且更宽泛
用 Sass 重编译，而不是硬覆盖
别在 custom.css 里反复写 .btn { background: red !important }。Bootstrap 4 基于 Sass 构建，它的变量和 mixin 都可复用。正确做法是把定制逻辑“塞进”原始源码流程里：
- 新建
_custom-variables.scss，覆盖关键变量：$primary: #2B6CB6;$font-family-base: 'Inter', sans-serif;$border-radius: 0.375rem; - 在主入口 SCSS（如
app.scss）中，确保顺序为：@import "bootstrap/scss/functions";@import "bootstrap/scss/variables";@import "custom-variables";← 放这里，才能生效@import "bootstrap/scss/mixins";@import "bootstrap/scss/bootstrap"; - 删掉 HTML 中对
bootstrap.min.css的<link>，只保留你编译出的单一 CSS 文件——避免两套规则并存
Shadow DOM 场景下 Bootstrap 类完全不生效
如果你在 Web Component 里用 attachShadow()，<button class="btn btn-primary"></button> 就是个裸按钮。这不是优先级问题，是样式根本没机会匹配：
立即学习“前端免费学习笔记（深入）”；
- 浏览器不会把
document.querySelector('link[href*="bootstrap"]').sheet里的.btn规则应用到 shadow root 内部节点上 - 必须用
adoptedStyleSheets显式注入：const sheet = document.querySelector('link[href*="bootstrap"]').sheet;this.shadowRoot.adoptedStyleSheets = [sheet]; - 注意：响应式媒体查询（如
@media (min-width: 768px)）会生效，但前提是该sheet已完整加载且未被 CORS 阻止；若用本地文件，确保服务器允许跨域读取 CSS -
:host .btn是合法选择器，但:host(.btn)没用——它匹配的是自定义元素自身带btn类，不是子元素
第三方组件库（如 Element UI）混用时的断点错乱
Bootstrap 4 的 .col-md-6 和 Element UI 的 .el-col-md-6 看似互不干扰，但它们共享同一套媒体查询断点值（768px）。一旦你改了 Bootstrap 的 $grid-breakpoints，Element UI 的栅格就不同步：
- 不要指望靠 CSS 顺序解决——JS 组件（如
el-table）内部仍按原断点计算列宽 - 如果必须共存，把 Element UI 的栅格类全禁用，只用其表单/弹窗等非布局组件，并用 Bootstrap 的
.row/.col控制结构 - 更稳妥的做法：用
create-react-app或 Vite 项目时，通过 PostCSS 插件（如postcss-prefix-selector）给 Bootstrap 的所有类加前缀（如.bs-btn），再配合 JS 初始化时传入对应选择器
最常被忽略的一点：Bootstrap 4 的 .d-flex、.text-center 这类工具类没有源码变量控制，改 $enable-flex-utilities 或删 @import "bootstrap/scss/utilities/flex" 才能真正剔除——否则就算你不用，它也在 CSS 文件里占着字节、参与层叠计算。
