根本原因是选择器权重不足，.btn权重0,0,1,0低于.bootstrap-iso未定义且Bootstrap原生规则如.btn.btn-primary权重0,0,2,0，需用组合类、:where()降权或data属性精准提权并确保JS组件container限定作用域。
直接加 .bootstrap-iso 类没用，因为 Bootstrap 原生 CSS 里根本没有这个前缀；真正起效必须靠编译时注入命名空间，或用 :where() + @layer 控制层叠上下文。
为什么 .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：.dashboard .btn.my-btn（权重0,0,3,0）最可控 -
!important在内联样式、Dark Reader 插件、Shadow DOM 场景下会突然失效
多个 UI 库共存时如何避免 .btn 和 .el-button 互相干扰
当 Bootstrap 和 Element Plus 同时存在，.el-button 和 .btn 可能互相覆盖，尤其在 .el-select .el-input__inner 这类嵌套结构里。靠顺序和权重已不够稳定。
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 给自定义按钮加语义属性：
<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之后 - 如果用了多个框架（如 Bootstrap + Font Awesome），也要按依赖关系排：
基础框架 → 组件库 → 自定义 - React 中若用
create-react-app，开发环境与生产构建的 CSS 加载行为可能不一致，务必实测
真正难处理的不是静态按钮，而是 Modal、Tooltip 这类 JS 动态挂载到 document.body 的组件——它们天然跳出任何 HTML 容器，CSS 选择器匹配失败是静默的，连报错都没有。
