因为ID选择器#header权重(0,1,0,0)远高于类选择器.btn(0,0,1,0)，而#header p权重(0,1,0,1)更碾压其组合，同权时后定义规则胜出，且:where()等零权重选择器仅靠顺序生效。
为什么 .btn 覆盖不了 #header p？
因为选择器权重不匹配。ID 选择器 #header 的权重是 (0, 1, 0, 0)，而类选择器 .btn 是 (0, 0, 1, 0)，哪怕你写十个 .btn 连用（如 .btn.btn.btn），总权重仍是 (0, 0, 10, 0)，依然低于一个 ID。真正生效的是 #header p —— 它含一个 ID + 一个元素，权重 (0, 1, 0, 1)，高位 b=1 直接碾压。
常见错误现象：
- 在组件里加
.primary-btn想覆盖父容器的#modal .confirm，结果无效 - 调试时发现 Chrome DevTools 显示样式“被划掉”，但找不到是谁干的
实操建议：
- 打开 DevTools → Elements 面板 → 点击目标元素 → 右侧 Styles 标签页，看哪些规则带删除线，再点左侧小箭头展开，就能看到所有匹配规则及其 specificity 值
- 避免混用 ID 和 class 控制同一类 UI 元素；现代 CSS 架构（如 BEM）基本弃用 ID 选择器
- 若必须覆盖高权重要求，优先用更具体的选择器（如
#header .btn），而非依赖!important
内联 为什么有时也不生效？
它确实有最高基础权重 (1, 0, 0, 0)，但有两个例外会绕过它：
立即学习“前端免费学习笔记（深入）”；
-
!important声明：比如外部 CSS 里写了color: red !important;，它会压制行内style="color: blue;" - CSS Custom Properties（CSS 变量）+
inherit或unset：如果父级设置了--text-color: green;，子元素用color: var(--text-color);，这个声明虽在外部样式表里，但计算时机晚于行内样式解析，可能造成视觉上“覆盖”
使用场景：
- 动态插入的提示框、tooltip 常用行内样式快速控制位置/颜色
- 服务端渲染首屏时用
style注入关键样式，规避 FOUC
注意：style 属性无法继承，也无法用 @media 或 @supports 包裹，响应式或条件逻辑必须交还给外部 CSS。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
两个 class 选择器冲突，谁赢？
看定义顺序，不是看 HTML 中 class 属性的书写顺序。例如：
<div class="error highlight">出错了</div>
<style>
.highlight { color: yellow; }
.error { color: red; }
</style>
最终文字是红色 —— 因为 .error 在 CSS 中后定义。HTML 中 class="error highlight" 或 class="highlight error" 完全没影响。
容易踩的坑：
- 多人协作时，不同文件引入 CSS 的顺序不一致，导致本地和构建后表现不同
- 用 Webpack 的
style-loader默认把 CSS 插入<head>末尾，但若手动用insert: 'top'改变插入点，会打乱预期顺序 - Shadow DOM 中的样式作用域隔离，外部 class 根本不参与层叠计算
建议：对同一功能模块的样式，尽量收拢到单个 CSS 文件；必要时用 BEM 命名（如 .form__error + .form__highlight）从语义上规避冲突。
为什么 :where(.a) { } 能覆盖 .b { } 却不增加权重？
:where() 是个“零权重”函数：它内部的选择器不贡献任何 specificity。所以 :where(.a) { color: red; } 权重是 (0, 0, 0, 0)，而 .b { color: blue; } 是 (0, 0, 1, 0)。按理说 .b 应该赢 —— 但它输了，是因为 :where() 规则写在了后面，触发了“同权情况下的后定义优先”规则。
这其实是刻意设计的便利性机制：
- 用于重置默认样式（如
:where(button, input, select) { margin: 0; }），确保不会意外压过业务 class - 配合
:is()使用时要小心：:is(.a, .b)权重取内部最高者（即 (0, 0, 1, 0)），而:where()始终是 0 - 目前 Safari 15.4+、Chrome 105+、Firefox 103+ 支持；旧版需回退到逗号分隔写法
真正容易被忽略的是：当你以为用 :where() “安全覆盖”时，其实只是靠书写顺序占了便宜；一旦别人把你的 :where() 规则挪到前面，或者加了个更高权重要求，它立刻失效 —— 它不是保险丝，只是个轻量开关。
