继承样式权重为0,0,0,0，不参与优先级计算；它仅在无直接匹配声明时作为兜底值生效，与选择器权重无关。
继承的样式没有优先级，它压根不参与优先级计算——这是浏览器渲染引擎的硬性规则，不是“低”，而是“零”。
继承样式在优先级系统中权重为 0,0,0,0
CSS 优先级（Specificity）只对「直接匹配该元素的选择器」生效。继承来的值，哪怕来自一个 #app .theme-dark body 这样权重高达 (0,1,2,1) 的规则，传到子元素上时，它的“出身”就清零了。
- 父元素
.theme-dark设置了color: #333，子元素p没写任何 color 规则 → 渲染引擎查不到任何针对p的 color 声明，才去取父级计算后的值 - 这个值被标记为 “inherited”，不是 “matched”，因此不进入 specificity 排序队列
- 只要子元素出现任意一条直接声明（哪怕只是
p { color: initial; }），就会立刻覆盖继承值
直接指定 vs 继承：不是“谁更强”，而是“谁算数”
这不是竞争关系，是存在性判断。浏览器样式计算分两步：先找所有能 match 到当前元素的选择器并按 specificity 排序；再看有没有可继承属性可 fallback。后者根本不在同一张表里。
-
div p { color: red; }和.parent { color: blue; }同时存在 → 子p直接被前者 match，red生效，继承路径被跳过 - 如果删掉
div p规则，即使.parent权重只有 (0,0,1,0)，子p也会显示blue—— 因为此时没有更“算数”的声明 - 错误认知：“ID 选择器继承下来应该比 class 强” → 实际上，
#header设的 color，传给子元素后和body设的 color 在子元素层面完全等价，都是 0 权重
为什么设计成这样？避免隐式依赖和调试黑洞
如果继承带权重，意味着改一个祖先的样式可能悄无声息地覆盖几十个后代的显式声明，且无法用 devtools 直观定位——这会让层叠逻辑彻底失控。
立即学习“前端免费学习笔记（深入）”；
- 你写
button span { color: white; }，结果按钮里的文字还是灰的 → 很可能是某个深层父容器用了!important或高权重要求，而继承链把它“带偏”了 - 现代 CSS 架构（如 BEM、CSS-in-JS）都依赖“显式控制”，继承只作为兜底机制，不是样式传递主干
- 真正需要跨层级强约束时，应该用
inherit（显式继承）、unset或自定义属性（--text-color），而不是赌继承链
最易忽略的一点：当你在 devtools 里看到某条 color 值标着 “inherited from .foo”，别急着调高父选择器权重——先检查子元素是否漏写了本该有的直接声明，或者被其他更小但更精确的选择器截胡了。
