一、核心概念
CSS 继承是指某些 CSS 属性如果被设置在父元素上，其值会自动流向（应用到）其所有后代元素（子、孙元素等）的特性。
核心价值：通过将样式声明应用于祖先元素，可以避免在所有后代元素上重复编写相同的代码，使得样式表更简洁、更高效、更易于维护。
二、可继承的常见属性
1. 文本
css
/* 文本与字体相关 (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. 列表
css
list-style-type; /* 列表标记类型(如disc) */
list-style-position; /* 列表标记位置(如inside) */
list-style; /* 列表样式缩写(除image部分外) */3. 表格
css
/* 表格相关 (Table) */
border-collapse; /* 表格边框合并方式 */
border-spacing; /* 表格边框间距 */
caption-side; /* 表格标题位置 */
empty-cells; /* 空单元格显示方式 */
table-layout; /* 表格布局算法 */4.视觉与交互
css
/* 视觉与交互 (Visual & Interaction) */
visibility; /* 元素可见性 */
cursor; /* 鼠标光标样式 */
caret-color; /* 输入光标颜色 */5.其他
css
page; /* 分页媒体设置 */
speak; /* 语音合成阅读方式 */
voice-family; /* 语音合成声音家族 */
volume; /* 语音合成音量 */
pitch; /* 语音合成音调 */
stress; /* 语音合成重音 */
richness; /* 语音合成音色丰富度 */
speak-punctuation; /* 语音合成标点阅读方式 */
speak-numeral; /* 语音合成数字阅读方式 */三、不可继承的常见属性
这些属性通常与盒模型 、定位 和背景相关。它们只影响元素自身，如果希望后代元素拥有相同样式，必须显式声明。
1. 盒模型属性（Layout & Box Model）
css
/* 显示与定位 (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）
css
/* 背景属性 (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）
css
list-style-image; /* 列表标记图像 */4.表格（Table）
css
border-spacing; /* 表格边框间距(部分浏览器) */
caption-side; /* 表格标题位置(部分浏览器) */5.打印（Print）
css
page-break-before; /* 之前分页 */
page-break-after; /* 之后分页 */
page-break-inside; /* 内部避免分页 */6.其他
css
outline; /* 轮廓 */
outline-width; /* 轮廓宽度 */
outline-style; /* 轮廓样式 */
outline-color; /* 轮廓颜色 */
outline-offset; /* 轮廓偏移 */
vertical-align; /* 垂直对齐方式 */
visibility; /* 可见性(部分情况) */
cursor; /* 光标样式(部分浏览器) */
resize; /* 尺寸调整 */
appearance; /* 原生外观控制 */重要提示 ：
background不继承是一个常见误区。父元素设置了背景图或背景色，子元素默认是透明的（transparent），所以会"透出"父元素的背景，看起来像是继承了，实则没有。
四、控制继承的关键字
CSS 提供了四个特殊的关键字来显式地控制继承行为，它们可以作为任何 CSS 属性的值。
1. inherit - 显式继承
强制元素获取其父元素该属性的计算值。
css
.parent {
border: 2px solid green;
padding: 20px;
}
.child {
border: inherit; /* .child 的边框会和 .parent 一样：2px solid green */
padding: inherit; /* .child 的内边距也会变成 20px */
}使用场景 ：通常用于强制继承那些本身不可继承的属性（如 border, padding）。
2. initial - 重置为初始值
将属性设置为它的默认初始值（由 CSS 规范定义）。
css
.parent {
color: red;
font-weight: bold;
}
.child {
color: initial; /* 颜色被重置为默认值 (通常是 black) */
font-weight: initial; /* 字体粗细被重置为默认值 (normal) */
}使用场景：撤销从父元素或用户代理样式表继承来的样式，将其"恢复出厂设置"。
3. unset - 智能重置
行为取决于属性本身：
-
如果该属性是可继承的 ，其行为等同于
inherit。 -
如果该属性是不可继承的 ，其行为等同于
initial。
css
.parent {
color: red; /* 可继承属性 */
border: 2px solid blue; /* 不可继承属性 */
}
.child {
color: unset; /* 等同于 inherit，会变成 red */
border: unset; /* 等同于 initial，边框会消失 (初始值为 none) */
}使用场景：一个"万能"重置值，非常实用。
4. revert - 还原为浏览器样式
将属性值还原到浏览器默认的样式表（用户代理样式表）所设定的值。
css
h1.child {
font-size: revert; /* 会恢复成浏览器默认的 2em，而不是继承父元素的字号 */
font-weight: revert; /* 会恢复成浏览器默认的 bold */
}使用场景：撤销所有作者样式（你写的 CSS），回退到浏览器的基本样式。
五、总结与实践技巧
| 关键字 | 行为 | 适用场景 |
|---|---|---|
inherit |
强制从父元素继承计算值 | 让不可继承的属性（如边框）也能继承 |
initial |
将属性重置为它的默认初始值 | 清除所有样式（继承的和自己设置的），回到初始状态 |
unset |
是继承属性则inherit，不是则initial |
智能重置，常用在 CSS Reset 中 |
revert |
将属性还原为浏览器默认样式表的值 | 撤销作者样式，恢复浏览器默认样式 |
最佳实践：
1.利用继承简化代码 ：将字体、颜色等全局样式定义在 <body> 或一个顶层容器上。
css
body {
font-family: system-ui;
line-height: 1.5;
color: #333;
}页面内大部分文本都会自动应用这些样式
2.理解不可继承属性：不要误以为背景、边框等会继承，给子元素设置背景色时记得覆盖。
3.善用 inherit ：当希望按钮、卡片等组件内部的文字颜色与组件外部一致时，可以使用 color: inherit;，提高组件的可复用性。
4.使用 unset 进行重置 ：在创建可复用组件时，可以使用 all: unset; 来移除元素的所有默认样式，然后从头开始设计，避免外部样式的干扰。