【H5 前端开发笔记】第 23 期：CSS 层叠样式表 —— 继承关系详解
CSS 的继承（Inheritance） 是层叠（Cascade）机制中非常核心的一部分。它决定了当子元素没有显式设置某个属性时，会自动从父元素继承什么值。
理解继承，能帮你少写 30%～50% 的重复 CSS，同时避免很多“为什么子元素没变色/没改字体”的困惑。
一、继承的基本规则（2026 年现状）
- 继承只向下传播：从父 → 子 → 孙……（永远不向上）
- 只有部分属性默认继承：大多数文本/字体/排版相关属性会继承；盒模型、布局、背景、定位相关基本不继承。
- 初始值（initial）：非继承属性没写时取规范定义的初始值（通常是 0、auto、none 等）
- 计算值（computed value）：继承时传的是父元素的计算值（经过单位换算、百分比解析后的值）
- 强制继承：任何属性都可以写
inherit来强制从父级拿值 - 全部重置：
all: inherit | initial | unset | revert
二、常见继承 vs 非继承属性对比表（高频记忆版）
| 类别 | 继承（Inherited: yes） | 非继承（Inherited: no）常见属性 | 备注 / 为什么这样设计 |
|---|---|---|---|
| 颜色 | color | background-color, border-color 等 | 文本颜色统一，背景各元素独立 |
| 字体 | font-family, font-size, font-weight, font-style, font-variant, line-height, letter-spacing, word-spacing, text-align, text-indent, white-space, text-transform | font-size-adjust（部分浏览器）、font-stretch 等少数 | 保持文档阅读一致性 |
| 文本装饰 | — | text-decoration（影响子元素但不继承值）、text-shadow | 装饰通常针对具体元素 |
| 列表 | list-style-type, list-style-position, list-style-image, list-style | — | ul/ol 风格统一 |
| 表格 | border-collapse, border-spacing, caption-side, empty-cells | border, padding（单元格独立） | 表格边框/间距常需统一 |
| 方向/语言 | direction, text-orientation, writing-mode | — | 国际化布局一致 |
| 光标/可见性 | cursor, visibility | opacity（不继承，但影响视觉） | cursor 常希望全局一致 |
| 盒模型/布局 | — | margin, padding, border, width, height, min/max-*, box-sizing, display, position, float, clear, overflow, z-index | 每个元素盒子独立，避免混乱 |
| 背景 | — | background, background-* 全家桶 | 背景是元素个性 |
| 其他 | quotes, orphans, widows（打印相关） | transform, transition, animation, filter, clip-path | 动画/变换针对单个元素 |
最常继承的 Top 8（背下来就够用 90% 场景）：
colorfont-familyfont-sizeline-heighttext-aligncursorvisibilitylist-style
三、代码演示（敲一遍最有感觉）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 继承演示</title>
<style>
/* 根元素设置 → 几乎全站生效 */
:root, html {
font-family: system-ui, "Segoe UI", sans-serif;
font-size: 16px; /* 继承给所有元素 */
line-height: 1.6; /* 继承 */
color: #333; /* 继承 */
text-align: justify; /* 继承 */
cursor: default; /* 继承 */
}
body {
max-width: 900px;
margin: 2rem auto;
padding: 1rem;
background: #f8f9fa; /* 不继承，body 自己有背景 */
}
article {
border: 2px solid #4caf50; /* 不继承，子元素不会自动有边框 */
padding: 1.5rem;
background: white; /* 不继承 */
}
h1, h2 {
color: #1976d2; /* 覆盖继承的 #333 */
}
.special {
color: #d32f2f; /* 只影响 .special 及其后代 */
font-size: 1.4em; /* 后代字体变大（相对继承） */
}
button, input, select, textarea {
/* 表单元素默认不从父级继承很多样式（浏览器 user agent 样式表干预） */
font-family: inherit; /* 强制继承字体 */
font-size: inherit; /* 强制继承字号 */
color: inherit; /* 强制继承颜色 */
line-height: inherit;
}
/* 强制所有属性继承（慎用） */
.force-inherit * {
all: inherit;
}
/* 重置为初始值 */
.reset {
all: initial; /* 几乎所有属性回浏览器默认 */
}
</style>
</head>
<body>
<article>
<h1>文章标题（蓝色，覆盖了继承的 #333）</h1>
<p>这段文字继承了 html 的 color、font-family、line-height、text-align 等。</p>
<div class="special">
<p>这个块的颜色是红色，字号变大 → 它的子元素也会继承红色和 1.4em 字号。</p>
<span>内联 span 也红 + 大字号</span>
</div>
<p>回到普通段落，又变回 #333 和 16px。</p>
<button>普通按钮（没强制 inherit 前可能用系统字体）</button>
</article>
<div class="force-inherit" style="border:3px dashed orange; padding:1rem; background:#fff3e0;">
<p>这里强制 all: inherit → 会继承父级的 border、padding、background！（慎用）</p>
</div>
</body>
</html>
四、高频面试/实战问题解答
- 为什么表单元素字体不跟 body 一样？
→ 浏览器对 input/button 等有独立的 user agent 样式表，默认不继承或部分覆盖。用font: inherit;等强制。 - font-size 是如何继承的？
→ 传计算值（px）。子元素font-size: 1.2em是相对于父元素的计算值算的。 - line-height 的特殊性
→ 如果父级写line-height: 1.5（无单位），子级继承的是倍数 1.5，而非计算后的 px 值（更灵活）。 - 如何一键重置所有继承？
→all: revert;（最接近用户期望）或all: initial; - 自定义属性（–var）继承吗？
→ 默认继承（除非用@property显式设inherits: false;）
下一期预告：CSS 层叠（Cascade）完整机制 + 特异性计算 + @layer 实战
有继承相关的迷惑场景（比如 visibility vs display、text-decoration 诡异行为等）欢迎留言～
祝大家 CSS 继承玩得明白，少踩坑！🌿
