CSS 继承 (Inheritance)

一、核心概念

CSS 继承是指某些 CSS 属性如果被设置在父元素上，其值会自动流向（应用到）其所有后代元素（子、孙元素等）的特性。

核心价值：通过将样式声明应用于祖先元素，可以避免在所有后代元素上重复编写相同的代码，使得样式表更简洁、更高效、更易于维护。

二、可继承的常见属性

1. 文本

/* 文本与字体相关 (Text & Font) */
color;                              /* 文本颜色 */
font-family;                        /* 字体系列设置 */
font-size;                          /* 字体大小 */
font-style;                         /* 字体样式(如斜体) */
font-variant;                       /* 字体变体(如小型大写字母) */
font-weight;                        /* 字体粗细(如粗体) */
font;                               /* 字体缩写属性 */
letter-spacing;                     /* 字符间距 */
line-height;                        /* 行高 */
text-align;                         /* 文本对齐方式 */
text-indent;                        /* 首行缩进 */
text-transform;                     /* 文本转换(如大写) */
word-spacing;                       /* 单词间距 */
text-shadow;                        /* 文本阴影 */
font-size-adjust;                   /* 字体大小调整 */
font-stretch;                       /* 字体拉伸 */
font-kerning;                       /* 字体字距调整 */
text-decoration-color;              /* 文本装饰颜色 */
text-decoration-line;               /* 文本装饰线型 */
text-decoration-style;              /* 文本装饰样式 */
text-decoration-thickness;          /* 文本装饰粗细 */
text-emphasis-color;                /* 文本强调颜色 */
text-emphasis-style;                /* 文本强调样式 */
text-underline-offset;              /* 下划线偏移 */
text-underline-position;            /* 下划线位置 */
white-space;                        /* 空白处理方式(如pre) */
hyphens;                            /* 连字符控制 */
line-break;                         /* 换行规则 */
overflow-wrap;                      /* 溢出换行(如break-word) */
quotes;                             /* 引号样式定义 */
direction;                          /* 文本方向(如rtl) */
unicode-bidi;                       /* Unicode双向算法设置 */

2. 列表

list-style-type;                    /* 列表标记类型(如disc) */
list-style-position;                /* 列表标记位置(如inside) */
list-style;                         /* 列表样式缩写(除image部分外) */

3. 表格

/* 表格相关 (Table) */
border-collapse;                    /* 表格边框合并方式 */
border-spacing;                     /* 表格边框间距 */
caption-side;                       /* 表格标题位置 */
empty-cells;                        /* 空单元格显示方式 */
table-layout;                       /* 表格布局算法 */

4.视觉与交互

/* 视觉与交互 (Visual & Interaction) */
visibility;                         /* 元素可见性 */
cursor;                             /* 鼠标光标样式 */
caret-color;                        /* 输入光标颜色 */

5.其他

page;                               /* 分页媒体设置 */
speak;                              /* 语音合成阅读方式 */
voice-family;                       /* 语音合成声音家族 */
volume;                             /* 语音合成音量 */
pitch;                              /* 语音合成音调 */
stress;                             /* 语音合成重音 */
richness;                           /* 语音合成音色丰富度 */
speak-punctuation;                  /* 语音合成标点阅读方式 */
speak-numeral;                      /* 语音合成数字阅读方式 */

三、不可继承的常见属性

这些属性通常与盒模型、定位和背景相关。它们只影响元素自身，如果希望后代元素拥有相同样式，必须显式声明。

1. 盒模型属性（Layout & Box Model）

/* 显示与定位 (Display & Positioning) */
display;                            /* 显示类型 */
position;                           /* 定位方式 */
float;                              /* 浮动方向 */
clear;                              /* 清除浮动 */
z-index;                            /* 堆叠顺序 */
clip;                               /* 裁剪区域 *//* 尺寸属性 (Dimensions) */
width;                              /* 元素宽度 */
height;                             /* 元素高度 */
min-width;                          /* 最小宽度 */
min-height;                         /* 最小高度 */
max-width;                          /* 最大宽度 */
max-height;                         /* 最大高度 *//* 外边距 (Margin) */
margin;                             /* 外边距缩写 */
margin-top;                         /* 上外边距 */
margin-right;                       /* 右外边距 */
margin-bottom;                      /* 下外边距 */
margin-left;                        /* 左外边距 *//* 内边距 (Padding) */
padding;                            /* 内边距缩写 */
padding-top;                        /* 上内边距 */
padding-right;                      /* 右内边距 */
padding-bottom;                     /* 下内边距 */
padding-left;                       /* 左内边距 *//* 边框属性 (Border) */
border;                             /* 边框缩写 */
border-top;                         /* 上边框 */
border-right;                       /* 右边框 */
border-bottom;                      /* 下边框 */
border-left;                        /* 左边框 */
border-width;                       /* 边框宽度 */
border-style;                       /* 边框样式 */
border-color;                       /* 边框颜色 */
border-radius;                      /* 边框圆角 *//* 盒模型与溢出 (Box Model & Overflow) */
box-sizing;                         /* 盒模型计算方式 */
overflow;                           /* 溢出处理缩写 */
overflow-x;                         /* 水平溢出处理 */
overflow-y;                         /* 垂直溢出处理 *//* 弹性布局 (Flexbox) */
flex;                               /* 弹性项目伸缩缩写 */
flex-grow;                          /* 弹性项目放大比例 */
flex-shrink;                        /* 弹性项目缩小比例 */
flex-basis;                         /* 弹性项目初始大小 */
flex-direction;                     /* 弹性容器主轴方向 */
flex-wrap;                          /* 弹性项目换行 */
justify-content;                    /* 主轴对齐方式 */
align-items;                        /* 交叉轴对齐方式 */
align-content;                      /* 多行对齐方式 */
order;                              /* 弹性项目顺序 */
align-self;                         /* 单个项目交叉轴对齐 *//* 网格布局 (Grid Layout) */
grid;                               /* 网格布局缩写 */
grid-template;                      /* 网格模板缩写 */
grid-template-columns;              /* 网格列定义 */
grid-template-rows;                 /* 网格行定义 */
grid-auto-columns;                  /* 自动网格列大小 */
grid-auto-rows;                     /* 自动网格行大小 */
grid-auto-flow;                     /* 自动放置算法 */
grid-column;                        /* 网格列位置 */
grid-row;                           /* 网格行位置 */
justify-self;                       /* 单个项目主轴对齐 *//* 间隙属性 (Gap) */
gap;                                /* 网格间隙缩写 */
column-gap;                         /* 列间隙 */
row-gap;                            /* 行间隙 */

2. 背景与外观（Background & Appearance）

/* 背景属性 (Background) */
background;                         /* 背景缩写 */
background-color;                   /* 背景颜色 */
background-image;                   /* 背景图像 */
background-repeat;                  /* 背景重复方式 */
background-position;                /* 背景位置 */
background-size;                    /* 背景尺寸 */
background-attachment;              /* 背景附着方式 */
background-clip;                    /* 背景裁剪区域 */
background-origin;                  /* 背景定位区域 *//* 视觉效果 (Visual Effects) */
box-shadow;                         /* 盒子阴影 */
opacity;                            /* 不透明度 */
filter;                             /* 滤镜效果 */
backdrop-filter;                    /* 背景滤镜 *//* 变换效果 (Transforms) */
transform;                          /* 变换效果 */
transform-origin;                   /* 变换原点 *//* 过渡动画 (Transitions & Animations) */
transition;                         /* 过渡效果缩写 */
transition-property;                /* 过渡属性 */
transition-duration;                /* 过渡持续时间 */
transition-timing-function;         /* 过渡时间函数 */
transition-delay;                   /* 过渡延迟时间 */
animation;                          /* 动画效果缩写 */
animation-name;                     /* 动画名称 */
animation-duration;                 /* 动画持续时间 */
animation-timing-function;          /* 动画时间函数 */
animation-delay;                    /* 动画延迟时间 */
animation-iteration-count;          /* 动画迭代次数 */
animation-direction;                /* 动画播放方向 */
animation-fill-mode;                /* 动画填充模式 */
animation-play-state;               /* 动画播放状态 */

3.列表（List）

list-style-image;                   /* 列表标记图像 */

4.表格（Table）

border-spacing;                     /* 表格边框间距(部分浏览器) */
caption-side;                       /* 表格标题位置(部分浏览器) */

5.打印（Print）

page-break-before;                  /* 之前分页 */
page-break-after;                   /* 之后分页 */
page-break-inside;                  /* 内部避免分页 */

6.其他

outline;                            /* 轮廓 */
outline-width;                      /* 轮廓宽度 */
outline-style;                      /* 轮廓样式 */
outline-color;                      /* 轮廓颜色 */
outline-offset;                     /* 轮廓偏移 */
vertical-align;                     /* 垂直对齐方式 */
visibility;                         /* 可见性(部分情况) */
cursor;                             /* 光标样式(部分浏览器) */
resize;                             /* 尺寸调整 */
appearance;                         /* 原生外观控制 */

重要提示：background 不继承是一个常见误区。父元素设置了背景图或背景色，子元素默认是透明的（transparent），所以会“透出”父元素的背景，看起来像是继承了，实则没有。

四、控制继承的关键字

CSS 提供了四个特殊的关键字来显式地控制继承行为，它们可以作为任何 CSS 属性的值。

1. `inherit` - 显式继承

强制元素获取其父元素该属性的计算值。

.parent {border: 2px solid green;padding: 20px;
}.child {border: inherit; /* .child 的边框会和 .parent 一样：2px solid green */padding: inherit; /* .child 的内边距也会变成 20px */
}

使用场景：通常用于强制继承那些本身不可继承的属性（如 border, padding）。

2. `initial` - 重置为初始值

将属性设置为它的默认初始值（由 CSS 规范定义）。

.parent {color: red;font-weight: bold;
}.child {color: initial; /* 颜色被重置为默认值 (通常是 black) */font-weight: initial; /* 字体粗细被重置为默认值 (normal) */
}

使用场景：撤销从父元素或用户代理样式表继承来的样式，将其“恢复出厂设置”。

3. `unset` - 智能重置

行为取决于属性本身：

如果该属性是可继承的，其行为等同于 inherit。
如果该属性是不可继承的，其行为等同于 initial。

.parent {color: red; /* 可继承属性 */border: 2px solid blue; /* 不可继承属性 */
}.child {color: unset; /* 等同于 inherit，会变成 red */border: unset; /* 等同于 initial，边框会消失 (初始值为 none) */
}

使用场景：一个“万能”重置值，非常实用。

4. `revert` - 还原为浏览器样式

将属性值还原到浏览器默认的样式表（用户代理样式表）所设定的值。

h1.child {font-size: revert; /* 会恢复成浏览器默认的 2em，而不是继承父元素的字号 */font-weight: revert; /* 会恢复成浏览器默认的 bold */
}

使用场景：撤销所有作者样式（你写的 CSS），回退到浏览器的基本样式。

五、总结与实践技巧

关键字	行为	适用场景
`inherit`	强制从父元素继承计算值	让不可继承的属性（如边框）也能继承
`initial`	将属性重置为它的默认初始值	清除所有样式（继承的和自己设置的），回到初始状态
`unset`	是继承属性则`inherit`，不是则`initial`	智能重置，常用在 CSS Reset 中
`revert`	将属性还原为浏览器默认样式表的值	撤销作者样式，恢复浏览器默认样式

最佳实践：

1.利用继承简化代码：将字体、颜色等全局样式定义在 <body> 或一个顶层容器上。

body {font-family: system-ui;line-height: 1.5;color: #333;
}

页面内大部分文本都会自动应用这些样式

2.理解不可继承属性：不要误以为背景、边框等会继承，给子元素设置背景色时记得覆盖。

3.善用 inherit：当希望按钮、卡片等组件内部的文字颜色与组件外部一致时，可以使用 color: inherit;，提高组件的可复用性。

4.使用 unset 进行重置：在创建可复用组件时，可以使用 all: unset; 来移除元素的所有默认样式，然后从头开始设计，避免外部样式的干扰。