css继承由属性自身定义决定，color、font-family、font-size、font-weight、line-height、text-align、visibility、cursor、list-style-type等可继承；display、margin、padding、background等不可继承；inherit强制继承计算值，unset依属性可否继承而定，initial一律回浏览器默认值。

CSS 继承不是“写了就能传下去”，而是由每个属性自身定义决定的——浏览器只按规范走，不猜你的意图。

哪些 CSS 属性默认会继承？

可继承属性集中在文本、字体、列表和部分交互表现上，子元素不写也能拿到父级值。常见且高频的有：

• color、font-family、font-size、font-weight、font-style
• line-height、text-align、text-indent、letter-spacing
• visibility、cursor、list-style-type、quotes

注意：text-shadow、box-shadow、background 这类视觉装饰属性明确不可继承；display 和 position 也不继承，哪怕你在父元素写了 display: flex，子元素仍是 display: inline（或浏览器默认值）。

为什么子元素没继承到 font-size 或 color？

大概率不是继承失效，而是被更高优先级规则覆盖了。DevTools 中看到 “Inherited from …” 是灰色的，说明它确实继承了，但后面有更重的声明把它顶掉了：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 检查子元素是否有 style="color: #000" 这类内联样式——权重 1000，轻松压过继承值
• 看是否命中了 ID 选择器（如 #header p）或高权重类组合（如 .card .title）
• 别忽略浏览器默认样式：h1～h6、strong 默认带 font-weight: bold，会覆盖你从父级继承来的 font-weight: 400

inherit / unset / initial 到底怎么选？

这三个关键字行为差异明显，混用容易出错：

• inherit：强制取父元素**计算后**的值，哪怕该属性本不可继承（比如 border: inherit 会报错）
• unset：对可继承属性 = inherit，对不可继承属性 = initial；但它不等于“清空”，例如父级 color: blue，子元素写 color: unset，结果还是蓝色
• initial：一律回浏览器默认值——color: initial 是黑色（不是透明），font-size: initial 是 16px（多数浏览器）

真正想“取消继承并恢复默认”，通常要写 color: initial，而不是 unset。

表单控件和伪元素是继承的例外区域

input、select、button 等原生表单控件在多数浏览器里会忽略父级文字样式，必须显式加 font-family: inherit、font-size: inherit 才能透传；::before、::after 伪元素虽是后代，但继承行为受生成内容限制，content 不继承，color 可继承，margin 不继承——这些边界点最容易漏查。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！