一、继承性规则概述

CSS中的属性分为可继承属性和不可继承属性两大类。

• 可继承属性：子元素会自动继承父元素的属性值
• 不可继承属性：需要显式设置，不会自动继承

二、可继承属性

主要是与文本、字体相关的属性，子元素会自动继承：

三、不可继承属性

大部分视觉和布局属性不会继承：

• 盒模型：width, height, margin, padding, border
• 背景：background, background-color, background-image
• 定位：position, top, right, bottom, left, z-index
• 布局：display, float, clear, flex, grid
• 其他：overflow, opacity, vertical-align

四、特例情况

1. text-decoration - 著名特例

div {
    text-decoration: underline;
}
/* 子元素不会继承下划线效果 */

原因：text-decoration 是绘制在父元素上的线条，子元素只是"穿过"这条线，并非真正继承。

2. a 标签的 color

<a> 标签有浏览器默认样式（User Agent样式），通常需要单独覆盖：

div {
    color: red; /* 可能不生效，<a>有默认蓝色 */
}
a {
    color: red; /* 需要单独设置 */
}

3. 表格相关的 border

表格的 border-collapse 和 border-spacing 有特殊行为。

五、控制继承的关键字

inherit - 强制继承

任何属性都可以使用 inherit 强制继承父元素的值：

.parent {
    border: 1px solid red;
}

.child {
    border: inherit; /* 强制继承父元素的border */
}

initial - 重置为默认值

将属性重置为浏览器默认值：

.child {
    color: initial; /* 重置为黑色（默认值） */
}

unset - 撤销设置

如果属性可继承则继承，否则重置为默认值：

.child {
    color: unset;
}

revert - 回滚样式

回滚到浏览器默认样式或用户样式：

.child {
    color: revert;
}

六、记忆口诀

"文本字体可继承，盒模型布局都不行"

• 和文字、字体相关的属性 → 通常可继承
• 和盒子（宽高、边框、背景、定位）相关的属性 → 通常不可继承

七、验证继承性

使用浏览器开发者工具

1. 打开 DevTools (F12)
2. 选中元素，查看 Computed 面板
3. 找到目标属性，查看是否有继承图标

使用JavaScript检测

window.getComputedStyle(element).getPropertyValue('property-name')

八、常见考题

题目1

div {
    text-decoration: none;
    font-size: 12px;
}
<div class="father">
    <a href="#">跳转</a>
</div>

问：①②能在a标签上实现效果吗？

答案：

• ① text-decoration: none
  • ❌ 不能，text-decoration 不继承
• ② font-size: 12px
  • ✅ 能，font-size 会继承

题目2

行内元素设置 width/height 是否有效？

答案：无效。width/height 对行内元素不起作用，需要先设置 display: inline-block 或 display: block。

九、参考资料

• MDN - CSS 继承
• CSS规范 - 可继承属性