在编写网页样式时，我们常发现某些样式会自动“传”给子元素，而另一些却不会，这涉及CSS的继承机制。所谓继承，是指当元素自身未显式设置某属性时，浏览器会沿DOM树向上查找祖先元素的计算值并应用。规范将属性分为可继承与不可继承两类，掌握分类能避免大量重复代码与调试困惑。
一、CSS继承的基本规则
CSS继承发生在属性未由作者样式、用户样式或浏览器内置样式直接指定的情况下。可继承属性在元素没有声明时会取父元素的计算值；不可继承属性则使用属性的初始值。这一机制让文本类内容能自然延续整体排版，而布局类属性各自独立，防止页面结构相互干扰。
需要注意，继承得到的是计算值而非指定值。例如父元素写font-size: 2em，若根字体为16px，则计算值为32px，子元素继承到的就是32px。下面用一段代码展示继承的自然表现：
<style>
.parent {
color: #333;
font-family: "Microsoft YaHei", sans-serif;
border: 1px solid #999; /* 不可继承 */
}
</style>
<div class="parent">
父元素文本
<p>子元素段落，颜色与字体继承，但无边框</p>
</div>
上述结构中，p标签未设颜色和字体，却自动呈现父级的深灰与雅黑，但边框并未出现，直观体现了可继承与不可继承的差异。
二、常见的可继承属性
可继承属性主要集中在文本、字体、列表与部分视觉属性上。文本相关包括color、font系列（font-family、font-size、font-weight、font-style）、line-height、letter-spacing、word-spacing、text-align、text-indent、text-transform。这些属性继承后，整段文字能保持统一格调。
列表与表格中也有可继承项，如list-style、list-style-type、list-style-position、border-collapse在部分浏览器视为可继承。此外，visibility和cursor也可继承，方便交互一致性。以下脚本列出常用可继承属性，便于查阅：
/* 可继承属性示例 */
body {
font-family: Arial, sans-serif;
color: #222;
line-height: 1.6;
text-align: left;
letter-spacing: 0.5px;
}
/* 后代自动获得以上文本特征 */
使用可继承属性能显著降低样式表体积。若项目要求全局字体统一，只在body声明即可，不必为每个div、span重复书写。但也要警惕深层嵌套时继承值被意外覆盖，建议用开发者工具检查计算样式。
三、常见的不可继承属性
不可继承属性多为控制元素自身盒模型与定位的属性。典型包括width、height、margin、padding、border、background系列、position、top、left、display、float、overflow、box-shadow、transform。这些属性若继承，会导致布局混乱，例如所有子元素都拥有父级宽高或边框。
我们对比一段错误预期代码，说明不可继承带来的误区：
<style>
.box {
padding: 20px;
border: 2px solid blue;
background: #f0f0f0;
}
</style>
<div class="box">
外层有内边距与边框
<div class="inner">内层不会自动有padding和border</div>
</div>
若希望内层也用相同内边距，必须显式声明或使用后续提到的inherit关键字。不可继承设计让组件保持独立，是现代CSS布局可预测的基础。
四、用inherit关键字主动继承
当不可继承属性也需要延续父级值时，可使用关键字inherit强制继承。它适用于需统一边框、间距或背景的场景，也常用于覆盖浏览器默认样式。比如在表单中让输入框边框与容器一致：
.container {
border: 1px solid #ccc;
padding: 12px;
}
.container input {
/* 主动继承父级边框与内边距 */
border: inherit;
padding: inherit;
width: 100%;
box-sizing: border-box;
}
该方式比复制数值更易于维护，父级修改后子级自动同步。但滥用inherit会增加耦合，建议仅在确有继承需求时使用，并配合注释说明意图。
五、继承与层叠的关系
继承只是CSS值来源之一，优先级低于作者直接声明。当子元素自身有规则时，继承值被覆盖；若使用inherit显式声明，则相当于指定值为父级计算值，仍可能被更具体选择器推翻。下表简要对比值来源权重：
| 值来源 | 优先级示意 | 是否可继承 |
|---|---|---|
| 作者样式直接声明 | 高（看选择器权重） | 否（不论属性） |
| inherit关键字 | 中（同普通声明） | 强制取父级 |
| 继承得到 | 低（低于任何声明） | 仅可继承属性 |
| 初始值 | 最低 | 不可继承属性默认 |
理解这张表有助于排查“样式不生效”问题。例如子元素颜色异常，往往是因为某条规则直接设了颜色，而非继承失效。熟练运用继承与层叠，才能写出简洁且健壮的样式表。