前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
首页程序员面试题库CSS inherit 关键字 实际使用场景
CSS层叠与选择器

什么场景下需要手动写 inherit 让子元素继承父属性?

最常见的场景是表单元素。浏览器默认样式表给 <button> 和 <input> 单独设了 font-family 和 color,导致它们不跟随父元素。写 font: inherit 或 color: inherit 就能让表单元素和周围文字保持一致。

前端进阶之旅 · 一题精讲更新于 2026.09.29
CSS#层叠与选择器
先看核心答案读代码示例
理解线索

`inherit` 的三个典型场景

  1. 表单元素字体统一<button> 和 <input> 默认用系统字体,加 font: inherit 跟随页面
  2. 链接颜色跟随上下文<a> 有浏览器默认蓝色,color: inherit 让它融入父元素
  3. 非继承属性强制传递border 和 padding 默认不继承,写 inherit 可以拿到父元素的值

inherit 取的是父元素的计算值,不是 CSS 源码里写的值。如果父元素写了 2em,子元素继承到的是换算后的像素值。

核心回答

先记住这个答案

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 就行。

给链接颜色跟随上下文CSS
.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 不关心父元素的值从哪来,只要父元素有计算值,子元素就能拿到。

从一道题,走向一组知识

把知识连起来

层叠与选择器

子元素自己写了样式,父元素的继承值还会生效吗?

子元素自己有声明时,inherit 的优先级取决于选择器特异性,和其它值没有区别。

层叠与选择器

is() 和 where() 在优先级上有什么区别?

:is() 和 :where() 配合 inherit 做批量重置时,特异性计算方式不同,会影响覆盖结果。

参考资料

  • CSS:层叠与选择器参考资料

示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。

本题目录
  1. 先记住这个答案
  2. 表单元素为什么不继承字体
  3. 链接和非继承属性的 inherit 用法
  4. 计算值的继承,不是源码值
  5. 容易答错的地方
  6. 面试官还会怎么问
  7. 把知识连起来
读懂,再试着讲出来

先看核心答案,再读代码。最后展开追问,检查自己有没有遗漏边界。

试着回答追问
浏览全部面试题理解原理,也关注真实的使用场景。回到顶部 ↑