表单控件（input、textarea、select）默认不继承color是浏览器UA样式的主动截断，非bug；修复需显式设color: inherit；font-size: inherit在em/rem嵌套下易因计算值传递导致缩放偏差；display: none会彻底中断继承。
为什么color在input里不继承
表单控件（input、textarea、select）默认忽略大多数文本类继承属性，这是浏览器的硬编码行为，不是 bug。即使父元素写了 color: red，input 仍按自身 UA 样式渲染为黑色（或系统主题色）。这不是选择器没匹配，也不是优先级问题，而是继承链被 UA 样式主动截断。
修复方法只有显式设置：
- 对每个表单元素单独写
input, textarea, select { color: inherit; }—— 注意必须加inherit，只写color: red会破坏主题适配 - 避免用通配符重置（如
* { color: inherit; }），它可能意外影响button的图标颜色或 SVG 文本 - 若用 CSS-in-JS 或 Shadow DOM，需确保样式作用域覆盖到这些元素内部
font-size: inherit 在 em 或 rem 场景下失效
当父元素 font-size 是相对单位（如 1.2em 或 1.5rem），子元素设 font-size: inherit 会继承“计算后值”，但这个值可能因上下文变化而意外缩放。比如父元素在 body { font-size: 16px; } 下是 1.2em → 19.2px，但若子元素被嵌套进另一个 font-size: 0.8em 的容器，继承值就变成 19.2px × 0.8 = 15.36px，而非你预期的“复刻父级大小”。
更稳的做法：
立即学习“前端免费学习笔记（深入）”；
- 统一用
rem基准，父元素设font-size: 1.2rem，子元素直接写font-size: 1.2rem（避免继承链放大误差） - 需要动态响应时，改用 CSS 自定义属性：
html { --text-scale: 1.2; } .parent { font-size: calc(var(--text-scale) * 1rem); } .child { font-size: calc(var(--text-scale) * 1rem); } - 慎用
em嵌套三层以上，每层都会叠加计算，极易失控
开发者工具里显示 inherited from … 却没效果
这通常意味着继承值被更高优先级规则覆盖，或者该属性根本不可继承——但开发者工具误标了来源。例如 margin: inherit 在 Styles 面板里可能显示 “inherited from div”，实际浏览器直接忽略，因为 margin 不在可继承属性列表中。
快速验证步骤：
- 打开 Computed 面板，找到目标属性，看右侧来源标注：如果是
inherited from …且值非initial或unset，说明真继承成功；如果是computed value且值与父元素不同，说明被覆盖 - 检查父元素该属性的“计算值”：右键父元素 → “Force element state” → 查看 Computed 中该属性是否真为有效值（比如
color: initial就等于透明黑，子元素继承后也看不见） - 临时禁用所有自定义 CSS，只留浏览器默认样式，确认问题是否消失——能排除 reset/normalize 的干扰
display: none 下的继承完全中断
display: none 不是隐藏视觉，而是彻底移出渲染树。此时子元素的样式计算、继承、布局全部跳过，inherit 关键字形同虚设。你甚至在 Styles 面板里都看不到子元素的任何继承记录。
替代方案：
- 用
visibility: hidden+position: absolute模拟隐藏，保留继承链（但注意它仍占文档流） - 需要真隐藏又想保留继承逻辑？把样式提前注入到子元素上，而不是依赖运行时继承
- JS 控制显隐时，别只切
display，同步更新 class 或 dataset，让 CSS 规则基于状态而非结构
真实场景里最麻烦的不是继承规则本身，而是它和 UA 样式、reset 策略、相对单位计算、以及渲染引擎优化层层叠在一起。每次怀疑继承失效，先看 Computed 面板里那个值到底是“没继承到”，还是“继承到了但被盖掉了”，或是“浏览器压根没让它继承”。
