Bootstrap样式被覆盖的根源是选择器权重和JS动态插入导致的作用域失控，需通过:where()降权、container选项限定作用域及属性选择器重写来根本解决。
Bootstrap 组件样式被外部 CSS 覆盖，不是“谁后加载谁赢”，而是选择器权重（specificity）和作用域失控共同导致的——直接加 !important 或调换 <link> 顺序，90% 的情况下治标不治本。
为什么 !important 和调整引入顺序常常失效
现代构建工具（Vite/Webpack）会打乱 CSS 注入顺序；浏览器 DevTools 的「Computed」面板里能看到最终生效规则，但你常发现：自定义样式虽在 Bootstrap 之后加载，却仍被划掉——因为 Bootstrap 的 .btn.btn-primary:focus 权重是 0,0,2,1，而你的 .my-btn 只有 0,0,1,0。更麻烦的是，像 modal、tooltip 这类 JS 动态插入到 document.body 的元素，根本不在你写的容器里，CSS 选择器再强也匹配不到。
- 检查 DevTools 的「Computed」→ 点击被划掉的属性 → 看「Specificity」数值和来源文件
- 不要只信 import 顺序：Vite 中
import 'bootstrap/dist/css/bootstrap.min.css'和import './custom.css'不等于最终 HTML 的<link>顺序 -
!important在 Bootstrap 5.3+ 中已被大量用于关键状态（如:focus-visible），你加一个，它可能加两个
用 :where() 降权是最轻量的编译时解法
如果你用 SCSS 源码编译（而非 CDN），这是目前最干净、可维护性最强的方式：不改 Bootstrap 源码，也不手动套 class，靠 CSS 层叠机制本身解决问题。
- 在自定义入口 SCSS 文件中写：
@layer bootstrap {:where(.my-bs) {@forward "bootstrap" with ($body-bg: #fff);}} -
:where()不增加权重，所以你的.my-bs .btn-primary和 Bootstrap 原生.btn.btn-primary权重一致，谁后声明谁生效 - Safari 15.4 以下不支持
:where()，若需兼容，改用:is(.my-bs)（注意：:is()会取最高权重子选择器，慎用） - 所有 JS 初始化完全不受影响：
new bootstrap.Modal(el)照常工作
JS 动态组件必须显式指定 container 选项
Modal、Tooltip、Popover 默认 append 到 document.body，脱离你的命名空间容器，样式自然失效。这不是 Bug，是设计使然。
立即学习“前端免费学习笔记（深入）”；
- 初始化 Modal 时传
{ container: '.my-bs' }：new bootstrap.Modal(el, { container: '.my-bs' }) - Tooltip/Popover 支持
data-container属性：<button data-bs-toggle="tooltip" data-container=".my-bs">Hover</button>
- 全局配置（如 Vue 中）需统一处理：
app.config.globalProperties.$tooltipOptions = { container: '.my-bs' } - 多个命名空间共存时（如 admin/user 分离），
container必须严格对应，不能混用.my-bs和.admin-bs
CDN 场景下只能靠选择器重写 + 属性选择器兜底
没源码？只能硬来。但别逐个覆盖 .btn、.form-control……重点盯住那些带 [data-bs-*] 的高权重规则。
- 优先重写属性选择器：
:where(.my-bs) [data-bs-toggle="modal"] { color: var(--bs-primary); } - 避免写
.my-bs .btn—— 权重 0,0,2,0，还是压不过button.btn.btn-primary - 用父级 ID 提权更稳：
#main-content .my-bs .navbar-brand { font-size: 1.5rem; } - 动态插入的 DOM（如 toast）无法用 CSS 选中，必须靠 JS 初始化时注入 class：
const toastEl = document.getElementById('liveToast'); new bootstrap.Toast(toastEl).show(); toastEl.classList.add('my-bs');
真正难的不是写对一行 CSS，而是意识到：Bootstrap 的样式不是“静态皮肤”，它的 JS 组件会动态创建 DOM、添加 class、响应事件——所有这些节点都得落在你划定的作用域里，否则再高的选择器权重也白搭。
