自定义第三方组件样式被 bootstrap 覆盖，主因是选择器权重不足、加载顺序错乱、层叠上下文分裂及 js 动态插入 dom 未对齐挂载约定，而非 css 书写错误。
为什么自定义第三方组件样式被 Bootstrap 覆盖了
不是你的 CSS 写错了，而是浏览器根本没选它——Bootstrap 的 .btn、.form-control、[data-bs-toggle] 这类选择器权重更高，且构建工具常打乱 link 顺序。你看到按钮没变色、输入框边框加粗、下拉菜单错位，大概率是 .el-select .el-input__inner 输给了 .form-control（权重 0,0,2,1 vs 0,0,1,1），或者 .tippy-box 被 .modal-backdrop 盖住，但真正原因是层叠上下文分裂，不是 z-index 数值小。
确保自定义样式在 Bootstrap 之后加载且生效
加载顺序是第一道防线，但它在现代构建中极易失效：
- 检查浏览器「查看页面源代码」，确认你的
custom.css或element-plus/index.css的<link>确实在bootstrap.min.css之后，且没加async或defer - Vite 用户需检查
vite.config.ts中是否启用了css.preprocessorOptions，它可能让 SCSS 注入时机早于预期 - Vue 单文件组件里
<style scoped></style>不参与全局层叠，无法覆盖.btn；要用:deep(.el-button)或::v-deep .el-button（Vue 2）穿透作用域 - React 项目若用 emotion 或 styled-components，确保自定义样式生成的 class 没被 CSS-in-JS 的插入顺序压到 Bootstrap 前面
用组合选择器提权，而不是堆 !important
!important 在以下场景会突然失效：第三方插件用内联样式（style="z-index: 2147483647"）、Dark Reader 插件注入更高权重规则、Shadow DOM 隔离、或 Bootstrap 升级后新加了带 !important 的 [data-bs-theme="dark"] .btn 规则。
- 给第三方组件外层容器加唯一 class，例如
<div class="my-form"><el-input></el-input></div>，再写.my-form .el-input__inner { border-radius: 4px !important; } - 优先用父级限定：
body .tippy-box权重 0,0,2,1，与.modal-backdrop平级，比单类.tippy-box更可靠 - 避免 ID 选择器（
#app .btn），它虽权重高但破坏可复用性，且 Vue/React 中 ID 可能动态生成
JS 组件挂载点不一致导致样式/层级失效
Bootstrap Modal 要求 DOM 必须直接挂载到 document.body 下，否则 z-index 生效范围受限；而 Tippy.js、Flatpickr、CKEditor 工具栏默认挂载到触发元素附近——结果一个在 body，一个在 .modal-body 内，天然分属不同层叠上下文，调 z-index 没用。
- 强制第三方插件挂载到
body：Tippy 用appendTo: document.body，Flatpickr 用appendTo: document.body - Modal 内部使用第三方组件时，手动指定其 container 选项：
new bootstrap.Modal(document.getElementById('myModal'), { container: '.my-bs' })，前提是你的命名空间已用@layer bootstrap { :where(.my-bs) { @forward "bootstrap"; } }正确包裹 - 检查 computed 样式里
.modal是否被标记为 “Stacking context”——若是，说明其父级有transform、opacity 或 <code>position: relative且设了z-index，需清理这些属性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
