CSS选择器被覆盖的根本原因是层叠优先级由来源、重要性、特异性、顺序四层决定，而非仅靠书写顺序；特异性按(a,b,c,d)四元组逐位比较，!important仅提升单声明优先级，合理使用需结合BEM、CSS变量与工具链管控。
为什么你的 CSS 选择器总是被覆盖？ CSS 层叠（Cascading）不是“谁写在后面谁生效”这么简单，而是由三重因素共同决定：**来源（origin）→ 重要性（importance）→ 特异性（specificity）→ 顺序（order）**。很多人只盯着最后一条，结果改了顺序也不起作用，本质是特异性或 !important 的权重压过了你的规则。
浏览器解析时会为每条声明计算一个“层叠优先级值”，只有当前者完全相同时，才比后者。所以单纯把样式挪到文件末尾，解决不了 .btn 被 .modal .btn 覆盖的问题——后者的特异性更高。
如何准确计算和比较选择器特异性？
特异性是一个四元组（a,b,c,d），按顺序逐位比较，不进位：
- a：内联样式（
style="..."）计为 1，否则为 0
- b：ID 选择器数量（如
#header）
- c：类、属性、伪类数量（如
.active、[type="submit"]、:hover）
- d：元素名、伪元素数量（如
div、::before）
style="..."）计为 1，否则为 0#header）.active、[type="submit"]、:hover）div、::before）例如：
.nav ul li a → (0,0,1,3)
#main .nav-item → (0,1,1,0)
div#sidebar.active → (0,1,1,1)
第二条和第三条 b 值都是 1，c 都是 1，但第三条 d=1 > 第二条 d=0，所以第三条更优先。
注意：:is()、:where()、:has() 内部的选择器不参与特异性累加——:is(.foo, #bar) .baz 的特异性只算外部的 .baz 部分。
立即学习“前端免费学习笔记（深入）”；
什么时候该用 !important，什么时候不该？
!important 不是“加强版 CSS”，而是把声明从“普通层叠流”中抽出来，归入更高优先级队列。它只影响单个声明，不影响整个规则块。
- ✅ 合理场景：CSS 框架定制（如覆盖第三方库的
!important 规则）、主题切换变量注入、调试时临时锁定某条样式
- ❌ 危险操作：日常组件样式中大量使用；用它“绕过”本该通过结构调整解决的特异性问题；在多人协作项目里不加注释就加
!important
- ⚠️ 注意：
!important 在作者样式表中权重高于用户样式表，但低于浏览器默认样式中的 !important（极少见）
!important 规则）、主题切换变量注入、调试时临时锁定某条样式!important
!important 在作者样式表中权重高于用户样式表，但低于浏览器默认样式中的 !important（极少见）如果必须用，建议配对出现，形成可维护的“覆盖组”：
.my-button {
background-color: #007bff !important;
border: 1px solid #0056b3 !important;
}
真正可持续的防覆盖策略
靠堆特异性（比如写成 body div#app div.container ul.menu li a.active）或滥用 !important 都会让 CSS 变得脆弱难维护。
- 用 BEM 或类似命名约定控制选择器深度，避免嵌套过深导致特异性失控
- 优先用单一类名实现样式，而非依赖上下文（
.btn-primary 而非 .header .btn）
- 利用
CSS Custom Properties 提取可变部分，用 JS 或 :root 控制优先级源头
- 在构建流程中接入
stylelint 规则，如 declaration-no-important 或限制特异性阈值（max-specificity: "0,2,0"）
.btn-primary 而非 .header .btn）CSS Custom Properties 提取可变部分，用 JS 或 :root 控制优先级源头stylelint 规则，如 declaration-no-important 或限制特异性阈值（max-specificity: "0,2,0"）最常被忽略的一点：CSS Modules、CSS-in-JS 或 scoped（Vue）等方案，并不是“避免覆盖”的银弹，它们只是把特异性问题转移到了运行时或哈希命名层面——你依然要理解层叠逻辑，否则连调试都找不到真实生效的那条规则。
