可继承属性由css规范硬性规定，如color、font-family、list-style-type、cursor等，盒模型/定位/背景类属性一律不继承；表单控件默认不继承文字样式，需显式设置inherit；devtools中“inherited from”仅表示来源，不保证生效。
可继承属性有明确清单，不是“看名字猜”
浏览器对哪些属性能继承有硬性规定，不取决于你写没写 inherit，也不看属性名里有没有“text”或“font”这类词。比如 cursor 和 visibility 会继承，但 opacity 不会；list-style-type 会继承，vertical-align 却不会——这些都由 CSS 规范定死，不能靠经验推断。
高频可继承属性集中在三类：
- 文字与字体：
color、font-family、font-size、font-weight、line-height、text-align - 列表与引号：
list-style-type、quotes - 行为与方向：
cursor、direction、unicode-bidi
所有盒模型、定位、背景、溢出类属性（如 margin、padding、background、position、overflow）一律不继承——写了也白写，子元素完全无视。
DevTools 里看到 “Inherited from …” 就真继承了？不一定
Chrome 或 Firefox 的 Styles 面板中出现灰色的 Inherited from <selector></selector> 行，只说明该值**来源是继承**，不代表它最终生效。它可能被更高优先级规则覆盖。
常见干扰项：
- 子元素写了内联
style="color: red"—— 权重 1000，直接压掉继承值 - 用了 ID 选择器（如
#nav a）或多个类组合（如.card .title），权重超过父级声明 - 浏览器默认样式表（user agent stylesheet）对
h1～h6设了font-weight: bold，会盖掉你设的font-weight: 400
判断是否真生效，得看 Styles 面板里那条样式是不是加粗显示且没有被划掉。灰色“inherited”行只是溯源，不是结论。
表单控件（input/select）默认不继承文字样式
这是个高频陷阱：给 body 设置了 font-family: system-ui，但 <input> 依然用浏览器默认字体（比如 Windows 上是 Segoe UI，macOS 是 Helvetica）。这不是继承失效，而是表单控件在多数浏览器中主动忽略父级文字样式。
必须显式重置：
input,
select,
button {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
注意：只写 font-family: inherit 不够，font-size 和 line-height 也得手动继承，否则容易出现高度错位或文字截断。
inherit / unset / initial 别混着用
这三个关键字解决的问题完全不同，选错会导致意外结果：
-
inherit：强制取父元素**计算后**的值，哪怕属性本不可继承（如border: inherit会报错，因为border不在继承清单里） -
unset：对可继承属性 =inherit，对不可继承属性 =initial；但它不是“清空”，比如父级color: blue，子元素color: unset后还是蓝色 -
initial：一律回浏览器默认值——color: initial变成黑色（不是透明），font-size: initial是 16px，display: initial是inline
真正想“取消继承并恢复默认”，该用 initial；想“确保拿到父级值”，才用 inherit；unset 更适合组件库做基础重置，但得清楚它对不同属性的实际效果。
继承本身很简单，难的是识别干扰源和关键字语义差异。最常被忽略的，其实是表单控件的隔离行为和 DevTools 里“inherited”行的误导性——它只告诉你来源，不保证结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
