根本原因是选择器权重不足，.btn权重0,0,1,0低于bootstrap的.btn.btn-primary（0,0,2,0），需用组合类如.btn.my-btn或父容器限定如.dashboard .btn.my-btn提升至0,0,2,0或0,0,3,0，避免!important，确保css加载顺序正确且作用域可控。
为什么 .btn 样式总被覆盖，连 background 都改不掉
根本不是你写错了，是浏览器压根没选你的规则——.btn 权重只有 0,0,1,0，而 Bootstrap 的 .btn.btn-primary 是 0,0,2,0，哪怕你把它写在后面也输。打开开发者工具的 Styles 面板，点那个被划掉的 background，如果来源是 bootstrap.min.css，说明你的规则连入场券都没拿到。
常见现象包括：按钮圆角消失、边框变粗、hover 色值完全不响应、disabled 状态灰度不对。别只检查 class 有没有加，要看 Computed 面板里最终生效的是哪一条声明。
用组合类提权，而不是堆 !important 或 ID
直接写 #app .btn 或 .my-section .btn.my-btn 是最可控的方式。它不破坏可维护性，还能自然限定作用域——你改的只是这个区域里的按钮，不影响导航栏或弹窗里的同名类。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- HTML 中给按钮加一个自定义类：
<button class="btn btn-primary my-btn">Submit</button> - CSS 写成：
.btn.my-btn { background-color: #d32f2f; }—— 权重立刻升到 0,0,2,0，和.btn.btn-primary平起平坐 - 若要更安全，加父容器前缀：
.dashboard .btn.my-btn（权重 0,0,3,0） - 避免
!important：它在内联样式、Dark Reader 插件、Shadow DOM 场景下会突然失效
多个 UI 库共存时，用 :where() 或属性选择器隔离
当 Bootstrap 和 Element Plus 同时存在，.el-button 和 .btn 可能互相干扰，尤其在 .el-select .el-input__inner 这类嵌套结构里。这时靠顺序和权重已不够稳定。
- 给自定义按钮加语义属性：
<button class="btn" data-ui="bootstrap">OK</button>，然后写button[data-ui="bootstrap"]，权重稳定且无歧义 - 现代浏览器可用
:where(.my-bs) { @forward "bootstrap"; }，:where()不增加权重，但能把整套 Bootstrap 锁进作用域 - 框架 JS 组件（如 Modal）会动态插入 DOM，必须确保这些节点也在
.my-bs容器内，否则样式脱钩
构建工具里 link 顺序可能被悄悄重排
你以为 import 'bootstrap.css'; import './custom.css'; 就稳了？Vite/Webpack 可能把所有 CSS 打包进一个 index.css，并按依赖图重排顺序。最终生效的，是浏览器 HTML 源码中 <link> 的实际顺序。
- 打开浏览器「查看页面源代码」，确认
custom.css的<link>确实在bootstrap.min.css之后 - Vite 用户检查
vite.config.ts是否启用了css.preprocessorOptions，它可能导致注入时机错乱 - CDN 场景下，手动把自定义 CSS 的
<link>放在 Bootstrap 下方，且不要加async或defer - Vue 单文件组件里的
<style scoped></style>不参与全局层叠，别指望它覆盖.btn
:where() + 构建时注入来兜底。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
