按钮样式失效主因是框架默认样式权重高、类名冲突及状态劫持；应通过组合类、项目前缀、正确加载顺序、属性选择器和状态归一化解决。
按钮类名被框架覆盖导致样式失效
多数 CSS 框架（如 Bootstrap、Tailwind、Ant Design）会给 .btn 或 button 设定强默认样式，包括 padding、border、font-weight 甚至 !important。你写的自定义规则若选择器权重不够，会被直接忽略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查「Computed」面板，确认哪条规则生效、是否带
!important - 避免直接覆盖框架基础类（如改写
.btn），优先用组合类增强语义和隔离性 - 若必须覆盖，用更具体的选择器，例如
.my-form .btn-primary而非单纯.btn-primary - 慎用
!important—— 它会破坏可维护性，且在框架升级后更难调试
组合类命名冲突与作用域混淆
当多个框架或自定义样式共存时，像 .btn-sm、.is-loading 这类短名极易重复。一个组件引入了 A 框架的 .btn-sm，另一个用了 B 框架同名但行为不同的 .btn-sm，结果尺寸/边距/圆角全乱。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 为项目定制前缀，例如统一用
.ui-btn、.ui-btn--small、.ui-btn.is-disabled - 用 BEM 风格明确层级关系：
.card__button、.modal-footer__confirm-btn，避免全局污染 - 如果使用 CSS-in-JS 或 scoped CSS（如 Vue 的
<style scoped></style>），让按钮样式只在组件内生效 - 禁用框架的非必要 utility 类（如 Tailwind 的
pt-2、bg-blue-500），防止散落在模板中干扰主按钮类
修改 CSS 优先级的可行路径
优先级不是靠堆砌 id 或 !important 解决的，而是靠结构可控性和加载顺序设计。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保自定义样式表在框架样式表之后加载（HTML 中
<link>顺序很重要） - 用属性选择器提升权重：框架可能用
button.btn，你可以写button[class*="btn"][class*="primary"] - 利用 :where() 或 :is() 降低权重干扰（现代浏览器）：用
:where(.ui-btn) { ... }写基础重置，再用具体类叠加修饰 - 对关键按钮加
data-ui="button"属性，然后写button[data-ui="button"]选择器，既语义清晰又权重稳定
按钮状态样式（hover / focus / disabled）被框架劫持
框架常通过伪类链式写法（如 .btn:hover:focus）或 JS 动态加类（.btn.is-active）控制状态，你的自定义 hover 色值可能根本没机会触发。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查框架文档是否提供「状态钩子」类，例如 Bootstrap 的
.btn-hover-primary或 Ant Design 的classNameActive属性 - 用
:not()排除干扰：.ui-btn:not(.btn):hover { background: #007bff; } - 对
disabled状态，优先用button:disabled而非.btn[disabled]，因原生属性匹配更可靠 - 如果框架用 JS 切换
.is-disabled类，就同步监听并补全你的样式：.ui-btn.is-disabled, .ui-btn:disabled
