inherit是强制子元素继承父元素该属性的计算值，而非声明值；适用于默认不可继承属性（如background-color）、表单控件样式重置、伪元素复用背景等场景。
inherit 不是“让子元素自动变一样”，而是“强制取父元素该属性的计算值”——哪怕这个属性本来就不能继承（比如 background-color 或 border）。
什么时候必须用 inherit？
当某个属性默认不继承，但你又希望子元素视觉上和父元素保持一致时。典型场景包括：
- 表单控件（
input、select）被用户代理样式重置了font-family或color，需显式拉回 - 父容器设置了
background-image，想让伪元素（如::before）复用同一张图 - 组件库中封装的按钮，内部
span需要继承外层button的border或padding
inherit 继承的是计算值，不是声明值
比如父元素写的是 font-size: 1.2em，而它自身相对于根字体是 16px，那么它的计算值就是 19.2px。子元素用 font-size: inherit 拿到的就是 19.2px，不是 1.2em —— 这意味着它不再随父元素的相对单位变化而动态响应。
常见误判点：
- 以为
inherit是“活链接”，实际是“快照式取值” - 在 CSS 变量（
--my-color）上直接写color: inherit，结果拿不到变量值（inherit不解析自定义属性） - 对
display、position等完全不可继承属性使用inherit，虽合法但无意义（它们本就不参与继承链）
和 initial、unset 混用时的优先级陷阱
三者共存时，inherit 会严格按层叠顺序胜出——只要它出现在权重相同的选择器里且声明靠后，就会覆盖其他两个。
例如：
.box { color: red; }
.box .text { color: initial; }
.box .text.override { color: inherit; }
此时 .override 元素的 color 一定是父元素的计算值（比如 red），哪怕 .text 已先声明 initial。容易被忽略的是：这种覆盖不依赖特异性，只看声明顺序 + 权重是否相等。
真正难处理的，是当父元素该属性本身值为 unset 或 initial 时，inherit 会继续向上找，直到根元素；若根也未定义，才回落到规范初始值——这个查找过程不可见，调试时得靠浏览器开发者工具的“Computed”面板确认最终值来源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
