css样式被覆盖本质是选择器权重不足，应通过提升选择器精准度而非滥用!important来解决；权重按内联>id>类/属性/伪类>元素逐位比较，优化结构、合理命名、利用父子关系和属性选择器可有效提权。
你的CSS样式被框架库覆盖，不是因为写错了，而是浏览器按规则判了你输——它选中了权重更高、更具体的那条规则。直接加 !important 能翻盘，但等于给后续所有人挖坑。
怎么一眼看出谁赢了？看 DevTools 里的 specificity 值
打开 Chrome 开发者工具（F12），选中元素，在右侧 Styles 面板里找带删除线的样式。重点盯住三点：
- 被划掉的规则旁是否标有
specificity: 0,2,0这类四元组？数值从左到右依次是：内联 / ID / 类/属性/伪类 / 元素/伪元素 - 同为
0,2,0的两条规则，看哪条在文件里出现得更靠后（就近原则） - 点开来源链接，确认是不是 Bootstrap 的
button.btn.btn-primary或 Tailwind 的.bg-blue-600:hover在压你写的.my-btn
提升选择器权重比 !important 更可持续
加 !important 是单点急救，而提权是结构性解法。优先尝试这些方式：
- 用父容器限定：
.app-root .my-btn比单独.my-btn多一个类，权重从0,1,0升到0,2,0 - 组合已有类：
button.my-btn.primary（前提是 HTML 中写了多个 class） - 用属性选择器增强唯一性：
button[data-role="submit"]权重等同于类，但更难被误覆 - 避免 ID：虽然
#my-btn权重高（1,0,0），但破坏组件复用，且框架可能也用了 ID 冲突
为什么 link 顺序调对了还是没用？
即使你把自定义 CSS 放在 <link rel="stylesheet" href="bootstrap.css"> 后面，如果框架用了更具体的选择器，你依然会输。比如：
.btn.btn-primary { background: #0d6efd } /* 权重 0,2,0 */
.my-btn { background: #dc381f } /* 权重 0,1,0 —— 输了 */
这时仅靠加载顺序无效，必须让自己的选择器也达到 0,2,0 或更高。常见误区：
- 以为
div .my-btn就比.btn.btn-primary高——其实仍是0,1,1vs0,2,0，后者胜 - 在 Vue/React 里写了
<style scoped></style>，却忘了框架样式是全局引入的，scoped 不影响它 - 用 PostCSS 自动加前缀时漏配
postcss-prefixwrap，导致提权没生效
什么时候才该用 !important？
只在以下场景考虑，且必须成对使用（覆盖 + 撤销）：
- 第三方库强制设了
!important的行内样式或关键状态（如 Ant Design 的input:focus） - CSS-in-JS 动态注入时，需确保某声明不被其他运行时样式干扰
- 临时调试：加
!important确认是否真为权重问题，验证完立刻删掉
真正容易被忽略的是：框架升级后可能悄悄提高选择器权重——比如从 .card 变成 .card.card-shadow，你原来靠 .page .card 提权的写法就突然失效了。所以提权策略要预留弹性，别卡死在刚好赢一格的位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
