根本原因是选择器权重不足或加载顺序错误，需用组合类（如.btn.my-btn）将权重提至0,0,2,0，或加父容器前缀（如.dashboard .btn.my-btn）达0,0,3,0，避免!important，确保JS动态插入节点也在作用域内。
Bootstrap 的 .btn、.container 等类名被你的自定义样式覆盖不了，不是因为你写错了，而是浏览器压根没选中你的规则——选择器权重不够，或者加载顺序不对。
为什么 .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
直接写 #app .btn 或 .dashboard .btn.my-btn 是最可控的方式。它不破坏可维护性，还能自然限定作用域。
- 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容器内，否则样式脱钩
真正难的不是写对一行 CSS，而是让 JS 动态插入的节点也落在作用域里——Modal 默认 append 到 document.body，一出来就脱离 .my-bs，样式立刻失效。这点最容易被忽略。
