深入理解 CSS 继承机制

什么是 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 继承是一个”默认帮你省事”的机制。记住三个要点：

1. 文字相关属性可继承，盒模型和布局属性不可继承
2. 用 inherit 关键字可以让不可继承的属性强制继承
3. 在公共父元素上设置通用样式，利用继承减少重复代码

掌握继承机制，是写出干净、可维护 CSS 的第一步。下次写样式时，先想一想：这个属性能不能继承？能不能少写几行？