CSS继承是样式计算过程中一项基础但容易被忽视的机制。它决定了一个元素在未显式声明某个属性时，是继续沿用父元素的计算值，还是回退到浏览器默认值。理解继承不仅能减少重复的样式代码，也能避免很多奇怪的表现。通常文本、字体、颜色、可见性等属性会继承，而盒模型、背景、边框、定位等属性不会继承。下面从规则层面展开。
一、CSS继承的底层规则与计算时机
在CSS中，每个属性都有一个是否继承的默认特性。可继承属性在被设置为指定值之后，子元素如果未声明自己的值，就会直接继承父元素的计算值。继承发生在层叠之后、最终样式计算之前，所以它不会产生任何额外的优先级。即使父元素的规则来自id选择器，子元素继承来的值在层叠时仍然被视为没有作者级的声明，它的优先级低于任何直接作用于子元素的规则。这就是为什么父元素设置color后，子元素可以很方便地覆盖。
继承是沿文档树向下传播的，但并不是所有后代都必须接受继承值而不可改变。例如一个隐藏的父元素设置visibility: hidden，子元素默认会继承隐藏状态，但如果子元素显式设置visibility: visible，它就会重新显示出来。这种可覆盖的特性使得继承既方便又可控。开发者工具中，继承来的样式通常会标注为Inherited from，这个细节能帮助快速分辨样式来源。
/* 父元素规则 */
.parent {
color: #0a0a0a;
font-size: 16px;
}
/* 子元素即使不写 color 和 font-size 也会继承 */
.child {
border: 1px solid #ccc;
}
/* 子元素重新声明后覆盖继承值 */
.child-important {
color: #d33;
}
上面的代码中，.child虽然没有声明color和font-size，但最终会继承来自.parent的值。而当某个子元素通过.child-important重新声明颜色后，继承值就被直接覆盖，不需要更高优先级的选择器。
二、哪些属性可以继承：按类别梳理
可继承属性主要围绕文字和视觉呈现，具体可以划分为以下几类。
- 字体属性：
font-family、font-size、font-weight、font-style、font-variant、font-stretch、font-size-adjust等。 - 文本属性：
color、line-height、letter-spacing、word-spacing、text-align、text-indent、text-transform、text-shadow、white-space、word-break、overflow-wrap等。 - 可见性与光标：
visibility、cursor。 - 列表相关：
list-style、list-style-type、list-style-position、list-style-image。 - 表格布局：
border-collapse、border-spacing、caption-side、empty-cells。 - 其他：
quotes、collapsible等。
虽然这些属性默认继承，但值的继承方式并不完全一致。以line-height为例，如果父元素设置line-height: 2，子元素继承的是数值2，最终行高为子元素自身font-size的两倍；如果父元素设置line-height: 200%，子元素继承的是父元素计算后的像素值，而不是百分比因子。这种差异会影响垂直节奏，常出现在全局样式设置中。
/* 场景一：line-height:2 子元素继承因子 */
.parent1 {
font-size: 20px;
line-height: 2; /* 父元素行高40px，子元素继承2这个因子 */
}
.child1 {
font-size: 14px; /* 最终行高28px */
}
/* 场景二：line-height:200% 子元素继承像素值 */
.parent2 {
font-size: 20px;
line-height: 200%; /* 父元素行高40px，子元素继承40px */
}
.child2 {
font-size: 14px; /* 最终行高仍然是40px，可能过于松散 */
}
理解这个差异后，在定义全局字体样式时推荐直接写数值因子，这样后代元素能够根据自身字号自动调整行高，避免小字号文本被过大的行高撑开。另一个需要注意的是font-size如果使用百分比或em，继承的是计算后的像素值，而不是相对父元素的百分比声明。
三、不可继承属性与强制继承
与其记住所有可继承属性，不如掌握不可继承属性的大致范围。盒模型相关属性基本不可继承，包括width、height、min-width、min-height、max-width、max-height、margin、padding、border以及各方向的宽度、颜色、样式。背景相关background、background-color、background-image默认也不继承。定位相关position、top、right、bottom、left、z-index不继承。显示与布局相关display、float、clear、overflow同样不继承。
不可继承不意味着完全无法从父元素取值。任何属性都可以通过全局关键字inherit强制继承父元素的计算值。例如子元素想复制父元素的盒子边框，可以写border: inherit；想继承父元素的box-sizing，可以写box-sizing: inherit。这在组件库和多列布局中非常有用。
/* 不可继承属性默认不会传递给子元素 */
.parent {
border: 2px solid #333;
background-color: #eee;
padding: 20px;
}
.child {
/* 若希望子元素也拥有相同边框，必须显式声明 */
border: inherit;
background-color: inherit;
}
还有一个常见错误：如果父元素设置了display: flex，它的子元素不会因此自动变成display: flex，而是继续使用自身的默认display值。由于display不可继承，父元素布局只作用于该元素本身，不会向后代传播。这个误解在弹性布局和网格布局中尤为突出。
四、inherit、initial、unset、revert 的区别与实战
除了inherit，CSS还提供了几个全局关键字用于重置属性状态，分别是initial、unset和revert。initial将属性重置为CSS规范定义的初始值。比如background-color的初始值是transparent，而color的初始值由浏览器决定，通常是黑色。它不会考虑浏览器用户代理样式表，这一点需要留意。
unset会根据属性是否默认继承来选择行为。如果属性是可继承的，unset等价于inherit；如果属性不可继承，unset等价于initial。因此它更像一个自动判断的开关。revert则更贴近实际需求，它把属性回退到用户代理样式表的默认值。比如一个<button>元素被作者样式去掉了默认边框，使用all: revert能恢复为浏览器原生按钮样式，而使用all: initial只会把border重置为medium none currentcolor，并不能还原成系统按钮外观。
/* 强制不可继承属性继承父元素 */
.row {
box-sizing: border-box;
}
.row > .col {
box-sizing: inherit; /* 让列继承盒模型计算方式 */
}
/* 清除组件根元素继承 */
.component {
all: revert;
}
在实际项目中，all: revert的浏览器兼容性比all: unset稍差，尤其是旧版本Safari和Edge。如果目标环境不能使用revert，可以退而求其次使用unset，或者手动枚举需要重置的关键属性。为了保持代码可维护性，通常不建议滥用全局关键字，尤其是在复杂组件中，它们会覆盖一些基础样式，造成不可预期的问题。
五、工程实践中如何利用继承减少重复代码
继承最大的价值体现在全局字体和颜色的控制上。通常会在body上设置font-family、font-size、color、line-height，让页面中大部分文本节点通过继承获得这些基础样式。这样不需要为每一个段落、标题、链接重复书写字体声明，样式表可以明显缩短。在主题切换场景中，只需改变最外层容器的颜色和背景，内部文本会自动继承新的颜色值，除非某些节点显式声明了自己的颜色。
但继承带来的便利也伴随着副作用。假如某个模块不希望继承全局颜色，必须在模块根元素重新声明color。如果遗漏，修改全局样式时可能会误伤到不想受影响的区域。因此可以利用all: revert或局部重置来隔离第三方组件与页面全局样式。这也是一些CSS框架在组件样式开头先声明box-sizing、margin、padding重置的原因。
另一个常用技巧是通过inherit让后代元素引用设计令牌。例如在卡片组件中，想让分割线的颜色始终和当前文字颜色一致，可以给分割线设置border-color: currentColor或border-color: inherit。前者使用的是当前元素自身的文字颜色，后者使用的是父元素的边框颜色，两者在不同语义下效果不同。调试这类问题时，开发者工具中的继承来源提示非常关键，可以逐层检查是哪个父元素的值影响到了当前元素。
总体而言，掌握CSS继承规则并不需要死记硬背每一个属性。只需要记住文本、字体、可见性、列表、表格布局等少数几类属性默认继承，盒模型、背景、布局类属性默认不继承，再结合inherit、unset、revert做精确控制，就能在编写样式时避免大量重复声明，同时减少继承产生的隐藏冲突。