先记住这个答案
inherit 关键字的作用是强制一个属性取父元素的计算值。最典型的场景是表单元素:浏览器默认样式表给 <button> 和 <input> 设了独立的 font-family 和 color,所以它们不会自动跟随页面字体。给表单元素写 font: inherit,就能让它们和周围文字保持一致。
- 表单元素默认不继承字体和颜色
inherit可以覆盖浏览器默认样式- 非继承属性也能用
inherit强制继承 - 继承的是计算值,不是源码里的值
表单元素为什么不继承字体
打开一个没有任何自定义 CSS 的页面,<p> 里的文字颜色和字体会跟随 <body> 上设的值。但 <button> 和 <input> 不会,它们显示的是系统默认字体,颜色也可能不一样。这是因为浏览器的用户代理样式表里给这些元素单独设了字体和颜色。
inherit 统一表单字体CSS/* 浏览器默认样式表大致包含这样的规则:
button, input { font-family: system-ui; color: ButtonText; } */
/* 项目全局重置 */
button,
input,
select,
textarea {
font: inherit; /* 字体族、字号、行高全部跟随父元素 */
color: inherit; /* 颜色也跟随父元素 */
}font: inherit 是一个简写,会同时继承 font-family 以及 font-size 等一系列字体属性。这比逐个写要方便,现在几乎所有 CSS 重置方案都包含这一条。
链接和非继承属性的 inherit 用法
除了表单元素,<a> 标签也有类似问题。浏览器给链接设了默认蓝色和下划线。如果你希望导航栏里的链接颜色跟随父元素,写 color: inherit 就行。
.nav-link {
color: inherit; /* 跟随父元素颜色 */
text-decoration: inherit; /* 如果父元素没下划线,链接也没有 */
}这样导航栏文字是白色,链接也是白色;正文文字是黑色,链接也是黑色。不需要为每种颜色主题单独写链接样式。
inherit 也能用在默认不继承的属性上。比如你想让子元素的 border 和父元素一模一样,写 border: inherit 就行。只是这种需求不常见,面试时提一句能体现你知道 inherit 不限于可继承属性。
计算值的继承,不是源码值
inherit 取的是父元素的计算值。如果父元素写了 font-size: 2em,在父元素自身 16px 基准的情况下计算值是 32px。子元素通过 inherit 拿到的是 32px,不是 2em。
这个区别在调试时很容易造成困惑:你看到父元素写了 2em,以为子元素也是 2em,但实际上子元素继承到的是一个固定的像素值。在开发者工具的 Computed 面板里能看到真实的计算值。百分比也一样,width: 50% 继承下来是计算后的具体像素值,不是 50%。
容易答错的地方
- 以为
inherit只能用在可继承属性上 inherit对任何属性都有效。给margin写inherit,子元素会拿到父元素的margin计算值。规范里对inherit的定义就是"取父元素的计算值",没有限制属性类型。只是对默认就继承的属性来说,不写inherit效果也一样,所以通常只在非继承属性或被浏览器默认样式覆盖的属性上才需要显式写。- 混淆
inherit和initial inherit是取父元素的值,initial是回到规范定义的初始值。display: inherit拿的是父元素的display计算值,而display: initial固定是inline。这两个方向完全不同。
面试官还会怎么问?
all: inherit 会有什么效果?
all 是一个简写属性,代表元素上的所有属性。all: inherit 会让所有属性都取父元素的计算值,等于把元素变成父元素的"克隆"——颜色、字体、边距、定位、显示模式全部和父元素一样。实际项目中很少这么用,因为大部分情况下你只想继承几个特定属性。
CSS 重置里为什么要写 inherit?
因为浏览器默认样式表给表单元素设了独立的字体和颜色,如果不用 inherit 覆盖,表单元素就和页面上的其它文字不一致。这也是为什么 CSS 重置方案里 button, input, select, textarea { font: inherit } 几乎成了标配。
父元素没有设置某个属性时,inherit 取到的是什么?
取的是父元素那个属性的计算值。即使父元素没有显式声明,它也有一个计算值——可能是从祖先继承来的,也可能是规范初始值。inherit 不关心父元素的值从哪来,只要父元素有计算值,子元素就能拿到。
参考资料
示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。