继承与控制关键字
继承是值沿文档树从父元素传给子元素的机制,只有部分 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 声明为什么最终生效。下一章把这些规则应用到盒模型和布局:第三章:盒模型与布局基础。
练习
- 用最小输入复现“继承与控制关键字”的成功路径,并记录可观察结果。
- 改变一个时序、数据或宿主条件,解释结果为何变化。
- 删除清理、校验或降级分支,写出能证明缺陷的断言。