B01 层叠继承与优先级

摘要：一个属性的最终值要经过四步：先看是否继承，再看来源与层，再比权重，最后比顺序。缺少显式声明时，继承属性取父元素值，非继承属性取初始值。理解这四步之后，「为什么设了没用」与「为什么父级改了子级也变」都能一次定位。
关键词：继承，初始值，权重，层，关键字

所属：frontend/css / B-进阶 ｜ 上一篇：B00-总结 ｜ 下一篇：B02-单位与数学函数

1 引言

A02 给出了权重的基本比较，真实项目还多两项：继承与层。前者解释「没写却生效」，后者解释「写了却被压」。

本文把四步计算讲完，并给出关键字与层的用法。范围见表 1-1。

项	本文覆盖	本文不覆盖
继承	哪些属性继承、inherit 与 initial	全部属性的继承清单
关键字	inherit、initial、unset、revert	浏览器默认值对照表
层	@layer 的排序与和权重的配合	构建工具的层注入（C05）

2 预备知识

项	要求	核对方式
环境	本地服务器可用	浏览器能打开 localhost
文件	css-practice/cascade.html	编码 UTF-8
浏览器	Chrome 130+，Styles 面板	能看到继承来源
前置	A02	会算权重

3 原理与实现

3.1 四步取值

浏览器按固定顺序决定一个属性的值，如图 3-1 所示。

flowchart TD
    A["元素某属性"] --> B{"有声明"}
    B -->|"否"| C{"属性可继承"}
    C -->|"是"| D["取父元素计算值"]
    C -->|"否"| E["取初始值"]
    B -->|"是"| F["按层与来源排序"]
    F --> G["比权重"]
    G --> H["比顺序"]
    H --> I["得到最终值"]

图 3-1 属性取值的四步

图上可见：继承只在「没有任何声明」时起作用；一旦子元素有声明，父元素的值不再参与竞争。

3.2 关键字与层

/* 运行环境：Chrome 130+；css-practice/cascade.css */
@layer reset, base, components;

@layer base {
  p { color: #334155; }
}

@layer components {
  .note { color: #1d4ed8; }
  .note.strong { color: #b91c1c; }
}

.demo {
  color: inherit;      /* 取父级颜色 */
  margin: initial;     /* 回到初始值 0 */
  padding: unset;      /* 可继承则继承，否则初始值 */
  border-color: revert; /* 回到低优先级来源的值 */
}

四个关键字与层的效果见表 3-1。

项	作用	典型场景
inherit	强制取父元素值	表单控件继承页面字体
initial	回到属性初始值	清除第三方库的默认边距
unset	可继承属性按继承，否则按初始值	重置组件样式
revert	回到低优先级来源（如浏览器默认）	恢复默认列表样式
@layer 顺序	后声明的层优先级更高	第三方库放低层，自己的样式放高层
层内权重	层与权重同时比较时，先比层	低层高权重也压不过高层低权重

三条规则：第三方样式包进低层，自己的覆盖不必再靠 !important；重置样式只用 @layer reset，不逐条写 initial；inherit 只用于确实需要跟随父级的场景，避免全局污染。

4 验证与讨论

1. 打开页面，确认 .note.strong 的红色生效（层相同、权重更高）。
2. 把 components 层改到 base 之前，观察 p 的样式压过 .note，验证层的优先级。
3. 给 .demo 的父级设置颜色，确认 inherit 生效。
4. 打开 Styles 面板，查看被划掉的声明及其所属层。

检查项	预期结果	说明
层顺序	后声明层胜出	@layer 顺序
权重比较	同层内权重高者胜	.note.strong
继承生效	子元素显示父级颜色	inherit
重置效果	列表符号恢复默认	revert

讨论与局限。 层的优先级高于权重，这一条会颠覆「权重越大越优先」的直觉；引入第三方库时应先确认其是否已使用层。另 revert 与 revert-layer 的语义不同，后者只回退到上一层。

5 常见问题

现象	原因	处理
设了颜色却被覆盖	对方在更高层	把自己的样式移到高层
字体在按钮上不生效	表单控件默认不继承字体	显式 font: inherit
重置样式后组件全乱	用了 initial 重置了不该重置的属性	改用 revert 或分层重置
加 !important 才生效	未利用层	建立三层结构，去掉 !important
继承莫名传给后代	可继承属性写在祖先上	在子元素显式声明

6 结论

序号	结论	依据
1	继承只在无声明时生效	图 3-1
2	层优先于权重	表 3-1
3	第三方样式放低层是最省力的覆盖方式	表 3-1
4	四个关键字按场景选用，不混用	表 3-1

• 上一篇：B00-总结
• 下一篇：B02-单位与数学函数
• 返回：B00-总结 ｜ 科目 README

参考文献

[1] MDN Web Docs · 层叠与继承，https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance（访问于 2026-10-31）
[2] CSS Cascading and Inheritance Level 5 · Cascade Layers，W3C，https://www.w3.org/TR/css-cascade-5/#layering（访问于 2026-10-31）