bootstrap的.btn-primary覆盖自定义样式因其选择器权重更高（20）且含!important，而单个类.my-btn仅权重10；可靠解法是复用其结构如.btn.my-btn提权至20，或用css变量、data-属性等无侵入方式。
为什么 Bootstrap 的 .btn-primary 总是盖过你写的样式？
因为 Bootstrap 大量使用类选择器组合（比如 .btn.btn-primary）和 !important，单个自定义类如 .my-btn 权重天然更低。浏览器按「选择器特异性」计算优先级，不是“后写的生效”。
- 类选择器权重是 10，ID 是 100，内联样式是 1000 ——
.btn.btn-primary是两个类，权重 20；.my-btn只有 10 - Bootstrap 4+ 还在部分工具类里加了
!important（比如.d-none），普通类根本抢不过 - 用
div.my-btn或button.my-btn能提权到 11，但不够稳；更可靠的是复用 Bootstrap 自己的结构逻辑
用 !important 不是错，但得知道它在哪失效
直接给你的样式加 !important 最快，但它在以下场景会翻车：
- Bootstrap 某些组件内部用内联样式（
style="color: red"），内联权重 1000 > 类+!important - 用户启用了浏览器扩展（如 Dark Reader），它可能用更高权重或 JS 动态插入样式，覆盖你的
!important - Vue/React 组件 scoped 样式或 Shadow DOM 会隔离作用域，
!important出不去 - 示例：你想改
.alert文字颜色，写.alert { color: #1a1a1a !important; }，但如果 alert 里有<strong>报错</strong>，而 strong 被设了内联色，那文字还是不听你
真正可控的提权方式：复用 Bootstrap 的命名结构
与其硬刚权重，不如钻进它的规则里——Bootstrap 本身鼓励用组合类，而不是覆盖。你写的类要跟它“同频”。
- 别单独写
.my-btn，改成.btn.my-btn（前提是元素本就有.btn）——权重立刻从 10 升到 20，跟.btn-primary平级 - 需要更高权限？用属性选择器：
button[class*="btn"]权重是 11，但语义弱；更推荐.btn.my-btn:hover（20+1=21） - 如果必须全局改某个组件（比如所有
.form-control圆角），在引入 Bootstrap CSS 后，用.form-control.form-control-custom替代直接覆盖，再让所有 input 加这个类 - 注意：Bootstrap 5 默认用 :root CSS 变量（如
--bs-border-radius），改变量比改选择器更干净，且权重无关
用 data- 属性做轻量级、无冲突的样式锚点
当项目已有大量 Bootstrap 类，又不想动 HTML 结构时，data- 属性是最小侵入的提权方案。
- 给元素加
data-theme="custom"，然后写[data-theme="custom"] .btn—— 属性选择器权重也是 10，但加上父级容器后（比如.modal [data-theme="custom"] .btn），轻松干掉 Bootstrap 原生规则 - 它不污染语义类名，也不依赖 Bootstrap 版本（不同版的
.btn类名可能微调，但data-是你定的） - 性能几乎无影响：现代浏览器对
data-选择器优化很好，比嵌套 4 层 class 还快 - 避坑：别用
[data-theme]这种泛匹配，容易误中；值尽量具体，比如data-override="input-radius"
复杂点从来不在“怎么加权重”，而在于你改的到底是哪一层——是组件内部子元素？是 JS 动态插入的内容？还是被 CSS-in-JS 注入的样式？没定位准层级，提权只是把问题往后推了一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
