Bootstrap 5 样式被覆盖主因是加载顺序错、特异性不足或层叠上下文隔离；需确保 Bootstrap CSS 最先加载、用 .btn.btn-primary 或 :where(.btn.btn-primary) 提升权重、检查插件是否陷入隐式层叠上下文，并优先通过 CSS 变量定制样式。
Bootstrap 5 的 CSS 样式被覆盖，通常不是因为你写错了选择器，而是加载顺序、特异性或层叠上下文这三者中至少一个没对齐。
检查 link 标签顺序是否把 Bootstrap 放在最前
Bootstrap 的 reboot.css 和基础类（如 .btn、.navbar-brand）必须在所有自定义样式之前加载，否则它的重置规则和默认样式会被后续 CSS 覆盖——哪怕你用了相同的选择器。
- HTML 中确保
<link rel="stylesheet" href="bootstrap.min.css">出现在你自己的custom.css之前 - Vite/Webpack 项目里，
import 'bootstrap/dist/css/bootstrap.min.css'必须写在import './custom.css'之前 - 别在
<style>标签里写覆盖规则——它默认插入到<head>末尾，天然晚于外部 CSS，但权重又不够，极易失效 - 构建后样式“偶尔生效”？很可能是打包工具重排了 import 顺序，用
npm run build后检查产物 HTML 的<link>排列
用 :where() 或复合类名提升选择器权重，而非 !important
单写 .btn-primary { background: red; } 很可能输，因为 Bootstrap 内部很多规则是 .btn.btn-primary（特异性 0-2-0），而你的规则只有 0-1-0。源码顺序赢不了特异性碾压。
- 安全写法：复用结构，写
.btn.btn-primary { background-color: #c00; }—— 权重打平，靠后加载取胜 - 现代解法：用
:where(.btn.btn-primary) { background-color: #c00; }，:where()内部不贡献特异性，整条规则降为 0-1-0，真正“一击必中” - 避免
!important：它会污染后续维护，比如你加了!important，别人想再覆盖就得叠两层!important，最后变成谁发布得晚谁赢 - Vue/React 中慎用
:deep()或::v-deep包裹，它只影响 scoped 模板内的节点，对第三方组件注入的全局 CSS 无效
确认第三方插件是否掉进隐式层叠上下文陷阱
看起来是 z-index 没生效？大概率不是数值问题，而是插件元素和 .modal 不在同一个层叠上下文里——z-index 在不同上下文中互不感知。
立即学习“前端免费学习笔记（深入）”；
- 打开 Chrome DevTools → Elements → 选中插件元素（如
.tippy-box或.flatpickr-calendar）→ 右侧 Layout 面板看是否标有 “Stacking context” - 常见诱因：
transform: translateZ(0)、opacity: 0.99、position: relative且带z-index的父容器（尤其是 Vue/React 的#app根节点） - 临时删掉疑似父级的
transform或opacity，看插件是否突然“浮出来” - 强制拉平层级：
<teleport to="body"><tippy></tippy></teleport>（Vue）或初始化时传container: document.body（Bootstrap JS 组件）
用 CSS 变量替代硬写样式，尤其改 btn、navbar 等主题类
直接覆盖 .btn-primary 容易漏掉 :hover、:focus、:disabled 等状态，导致交互异常；而 Bootstrap 5+ 提供了完整的 CSS 变量体系，这才是源头可控的改法。
- 在 Bootstrap CSS 加载后、自定义 CSS 前，注入变量修改：
:root { --bs-btn-bg: #2c3e50; --bs-btn-hover-bg: #1a252f; --bs-navbar-color: #ecf0f1; } - 变量名都以
--bs-开头，完整列表见 Bootstrap 源码_variables.scss - 如果用 Sass，应在
@import "bootstrap/scss/bootstrap"之前重定义变量，例如$primary: #2c3e50; - 别在
:root外部覆盖变量，否则可能被后续 reset 覆盖
真正难的不是怎么写 CSS，而是搞清你的规则到底有没有机会参与层叠——它是否加载到位、是否具备足够特异性、是否和目标元素处于同一渲染层。这三个条件缺一不可，漏掉任意一个，!important 都只是暂时掩盖问题。
