bootstrap 5 的 .btn-primary 总带 !important 是设计选择，为确保基础行为不被意外覆盖；其权重为 0,2,0 + !important，远超单类 .my-btn（0,1,0），且内联样式、js 动态 style、后加载框架 css 均可使其失效。
Bootstrap 5 的 .btn-primary 为什么总带 !important？
因为 Bootstrap 5 明确在部分工具类中注入了 !important，尤其是响应式显示类（如 .d-none）、颜色工具类（如 .text-danger）和排版类。这不是 bug，是设计选择——它确保基础行为不被意外覆盖。你写的 .my-btn { color: #222; } 权重只有 0,1,0，而 .btn-primary 是 0,2,0 + !important，浏览器直接判你“无权发言”。
为什么加了 !important 还是没生效？
常见原因有三个：
- 你的
!important被更高权重规则压住：比如组件里用了内联样式style="color: red"（权重1000），比任何类+!important都高 - 框架内部用 JS 动态写入了 style 属性（如某些 Modal、Tooltip 组件），它每次渲染都重置
- 你写的
!important规则本身被其他 CSS 文件覆盖了——比如 Tailwind 的bg-blue-600或 Ant Design 的.ant-btn在你之后加载
.btn.my-btn 比单独 .my-btn 有效，但为什么有时还是不行？
因为 Bootstrap 5 很多组件依赖嵌套结构，光组合类还不够：
-
.navbar-brand实际生效的是.navbar .navbar-brand（权重0,2,0），你只写.btn.my-btn对它无效 -
.alert的文字颜色由.alert > *:not(.alert-link)控制，你改.alert根元素，子元素p或strong仍走原规则 - 某些样式来自
reboot.css（Bootstrap 的基础重置），比如button默认边框、字体，它不走.btn，得单独处理button.my-btn
真正能绕过 !important 的稳定方式有哪些？
不是拼权重，而是换路径：
- 用 CSS 变量接管：Bootstrap 5 支持
--bs-primary等变量，你在 :root 或父容器里重设它，所有用到该变量的地方自动更新 - 用
data-属性限定：button[data-theme="custom"] { color: #1a1a1a !important; }，HTML 写<button data-theme="custom"></button>，比泛用类更可控 - 用父级 class 锁定作用域：
.my-app .btn权重升到0,2,0，再配合变量或属性选择器，基本避开全局冲突
最常被忽略的一点：检查 DevTools 的 Computed 面板里，目标属性值旁边是否标着 “from bootstrap.min.css” 和 “!important”，而不是只看 Styles 面板里有没有划掉——后者可能只是被同文件里更靠后的规则覆盖，前者才说明你真被框架锁死了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
