什么是 CSS 继承？
当我们给一个父元素设置样式时，它的子元素有时候会自动”继承”这些样式，这就是 CSS 的继承机制。理解哪些属性可以继承、哪些不能，是写出简洁高效 CSS 的关键。
简单来说，继承就是子元素自动获得父元素的某些样式属性，不需要你为每个子元素重复声明。
举个例子，我们给一个容器设置文字颜色为深蓝色：
<article class="post">
<h2>文章标题</h2>
<p>这是第一段正文内容。</p>
<p>这是第二段，同样不需要单独设置颜色。</p>
</article>.post {
color: #2c3e50;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
line-height: 1.8;
}上面的代码中，h2 和 p 标签都会自动继承 .post 的文字颜色、字体和行高。你不需要给每个子标签再写一遍相同的样式。
哪些属性可以继承？
CSS 属性上百种，但真正可以继承的不到 20 个，而且几乎都和”文字外观”有关：
| 类别 | 可继承属性 |
|---|---|
| 文本 | color, text-align, text-indent, text-transform, text-shadow |
| 字体 | font-family, font-size, font-weight, font-style, font-variant |
| 行高 | line-height |
| 列表 | list-style, list-style-type, list-style-position |
| 其他 | letter-spacing, word-spacing, white-space, visibility, cursor |
记忆口诀：跟文字长什么样有关的，基本都能继承。
哪些属性不能继承？
盒模型、布局、背景相关的属性，默认都不会继承：
- 盒模型：width, height, margin, padding, border
- 布局：display, position, float, overflow
- 背景：background, background-color, background-image
- 其他：opacity, z-index, transform, box-shadow
这些属性的共同特点是：它们控制的是元素自身的”占地面积”和”摆放方式”，如果继承了，布局会乱套。想象一下，如果 width 也能继承，那所有子元素都会和父元素一样宽，页面就没法看了。
强制继承：inherit 关键字
有些属性默认不能继承，但你可以用 inherit 关键字强制让它继承：
.button {
border: 2px solid #3498db;
padding: 10px 24px;
}
.button a {
/* 强制继承父元素的边框和内边距 */
border: inherit;
padding: inherit;
/* 强制继承文字颜色 */
color: inherit;
}inherit 在组件化开发中特别有用。比如你写了一个卡片组件，希望内部的链接自动使用卡片的文字颜色，而不是浏览器默认的蓝色：
.card {
color: #555;
}
.card a {
color: inherit; /* 不要默认蓝色，跟着卡片走 */
text-decoration: underline;
}继承的实际价值
善用继承可以让你的 CSS 更简洁、更易维护。不好的写法是每个元素都重复设置：
header, header h1, header h2, header p, header a {
font-family: Georgia, serif;
color: #333;
}好的写法是在父元素上设置一次：
header {
font-family: Georgia, serif;
color: #333;
}当页面有几十个元素共享相同样式时，继承能显著减少代码量。更重要的是，将来需要调整字体或颜色时，只改一处就行了。
继承的层叠顺序
理解继承在层叠中的位置很重要。继承来的样式的优先级低于任何直接指定的样式：
/* 继承来的 color 优先级最低 */
body {
color: #333;
}
/* 直接指定的样式会覆盖继承 */
p {
color: #666;
}
/* !important 最高优先级 */
.special {
color: red !important;
}优先级从低到高依次是：继承样式 → 通配符 * → 元素选择器 → 类选择器 → ID选择器 → !important。
总结
CSS 继承是一个”默认帮你省事”的机制。记住三个要点：
- 文字相关属性可继承，盒模型和布局属性不可继承
- 用 inherit 关键字可以让不可继承的属性强制继承
- 在公共父元素上设置通用样式，利用继承减少重复代码
掌握继承机制，是写出干净、可维护 CSS 的第一步。下次写样式时，先想一想：这个属性能不能继承？能不能少写几行？