Skip to content

继承与控制关键字 ​

继承是值沿文档树从父元素传给子元素的机制,只有部分 CSS 属性默认可继承。color 和字体相关属性通常会继承,盒模型和布局尺寸通常不会。不要把“子元素看起来一样”误认为所有属性都继承了。

css
.article { color: #222; }
.article code { color: inherit; }
.reset { all: unset; }
.copy { color: revert; }

inherit 明确要求使用父值,initial 回到属性初始值,unset 按属性是否可继承决定行为,revert 回到更早的层叠来源。all 可以批量控制大部分属性,但使用过宽会清掉浏览器默认和组件需要的行为,应在边界明确时使用。

变化一个条件观察来源 ​

在父元素上改 color,子元素若没有直接声明通常会变化;改 margin,子元素通常不会自动跟随。给子元素加 color: initial、inherit 和 revert,比较同一属性在不同控制关键字下的结果,并在 Computed 面板检查最终值来源。

实验与练习 ​

建立一个带标题、段落、代码片段和链接的文章树。只在父元素设置字体和颜色,再分别给子元素加入直接声明和控制关键字。提交一张属性来源表,说明哪些值来自继承、哪些来自初始值、哪些被层叠规则覆盖。

可运行微实验:从匹配到胜出 ​

在一个页面中保留三个同名元素,给它们同时设置类型、类、属性和伪类规则。先在 Elements 的 Matched CSS Rules 记录“命中但未胜出”的声明,再只改变一个条件:元素增加类、属性值改变、祖先增加类或规则移入另一层。每次只记录匹配集合、特异性/层级和最终 computed value,避免把“选择器没命中”和“命中了但被覆盖”混为一谈。

html
<p class="notice" data-state="error">消息</p>
<style>p { color: gray } .notice { color: navy } [data-state="error"] { color: crimson }</style>

常见错误 ​

  • 认为所有 CSS 属性都继承。
  • 用 all: unset 粗暴重置第三方组件。
  • 把 initial、unset 和 revert 当成同义词。
  • 只看元素面板,不看 Computed 值的真正来源。

本章回顾 ​

现在可以沿着“引入规则 → 选择器匹配 → 层叠来源与层 → 特异性 → 继承”解释一个 CSS 声明为什么最终生效。下一章把这些规则应用到盒模型和布局:第三章:盒模型与布局基础。

练习 ​

  1. 用最小输入复现“继承与控制关键字”的成功路径,并记录可观察结果。
  2. 改变一个时序、数据或宿主条件,解释结果为何变化。
  3. 删除清理、校验或降级分支,写出能证明缺陷的断言。

查看本节答案

用心记录每一步成长