应优先优化选择器结构或加载顺序而非滥用!important；打开devtools查看带删除线的样式及specificity四元组（如0,1,1,0），确认是否因权重不足被覆盖，再针对性提权。
直接加 !important 能强制生效，但它是“止痛药”，不是诊断书——90% 的场景里，真正该动的是选择器结构或加载顺序，而不是追着加感叹号。
怎么看是不是真被覆盖了
打开 DevTools（F12），选中元素，在右侧 Styles 面板里找带删除线（strikethrough）的样式。被划掉的，就是被更高优先级规则干掉了。悬停上去会显示 specificity is lower than another rule 和一个四元组，比如 0,1,1,0。
- 第一位（a）：内联样式，基本为 0
- 第二位（b）：ID 个数，
#header算 1 —— 只要对方有 ID，你写十个类也赢不了 - 第三位（c）：类 / 属性 / 伪类个数，
.btn、[disabled]、:hover各算 1 - 第四位（d）：标签 / 伪元素个数，
div、::before各算 1
注意：!important 不参与这个四元组计算，它只是让这条声明“插队”，不解决根本冲突。
为什么加了类名还是不生效
常见错觉是“我写了 .card__title，肯定比 .modal .header h2 简单，应该赢”，但后者权重是 0,0,2,1（两个类 + 一个标签），前者只有 0,0,1,0，直接输。
-
.card .title和.card > .title是两回事：前者匹配任意后代，后者只认直接子元素 - Vue 的
<style scoped></style>或 React 的 CSS Modules 会把.title编译成.title[data-v-abc123]，你写的div .title根本不匹配真实 DOM - 第三方库（如 Ant Design）常在 HTML 末尾引入，且用深度嵌套或 ID，你的
.btn很难赢过它的.ant-btn-primary - 自定义
<link>放在bootstrap.css前面 → 即使权重一样，也会被后加载的覆盖
Tailwind 中怎么安全提权
Tailwind 提供两种轻量提权方式，比全局 !important 更可控：
- 类名后加
!：如p-4!编译为.p-4\! { padding: 1rem !important; }，支持响应式写法（md:p-4!），但会禁用部分变体（如md:!p-4无效） - 用
[&]提升特异性：如[&]:w-[80px]编译为.w-full [&]:w-[80px]，权重从0,1,0升到0,2,0，且完全兼容[&]:md:w-[120px] - 避免错误写法：
!p-4（前置无效）、sm:!p-4（应写sm:p-4!）、手动加\!（现代构建工具已自动转义，多数冗余）
真正容易被忽略的点
很多人盯着 specificity 四元组看半天，却漏掉了三个更隐蔽但高频的问题：
- 最终生成的 HTML 中
<link>顺序和你写的源码不一致（Vite/Webpack 插件可能重排） - 用了
@import，导致实际加载时间晚于预期，彻底颠倒层级 - CSS Modules 或 scoped style 下，你写的
div .title在 DevTools 里根本搜不到 —— 因为真实 DOM 是div[data-v-xyz] .title[data-v-xyz]，选择器压根没命中
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
