CSS 继承值转换绝招：initial、inherit、unset 与可继承性全览

在写 CSS 样式时，我们经常需要处理子元素的样式继承问题。这里我们来统一理解 initial、inherit、unset，并列出常见的 可继承 和 不可继承 属性。
在这里插入图片描述

一、基本概念

关键字	含义	详细说明
`initial`	重置属性为初始值	不继承，将属性恢复为 CSS 默认值
`inherit`	强制继承父元素的值	属性无论是否可继承，都会继承
`unset`	根据属性是否可继承，选择上面两者之一	可继承属性效果同 `inherit`，否则同 `initial`

二、会继承的 CSS 属性

这些属性通常与文本样式相关，因为它们的设计初衷是为了让子元素能够继承父元素的外观设置。

字体相关属性

font-family：字体族
font-size：字体大小
font-weight：字体粗细
font-style：字体样式（如斜体）
font-variant：字体变体（如小型大写字母）

文本相关属性

color：文本颜色
text-align：文本对齐方式
text-indent：文本缩进
text-transform：文本转换（如大写、小写）
letter-spacing：字母间距
word-spacing：单词间距
line-height：行高
direction：文本方向（如从左到右或从右到左）
white-space：空白符处理

列表相关属性

list-style-type：列表项标记类型
list-style-position：列表项标记位置
list-style-image：列表项标记图像

其他继承属性

visibility：可见性
cursor：鼠标指针样式
quotes：引号样式

三、不会继承的 CSS 属性

这些属性通常与布局、边框、背景等视觉效果相关，目的是定义单个元素的独立样式，而不是影响其子元素。

盒模型相关属性

width：宽度
height：高度
margin：外边距
padding：内边距
border（包含 border-width、border-color、border-style）

定位与布局相关属性

position：定位方式
top、right、bottom、left：定位偏移
float：浮动
clear：清除浮动
display：显示模式
z-index：堆叠顺序

背景相关属性

background-color：背景颜色
background-image：背景图像
background-repeat：背景重复
background-position：背景位置
background-size：背景尺寸

其他不可继承属性

opacity：透明度
overflow：溢出处理
clip：裁剪区域
transform：变换
transition：过渡动画
animation：动画
box-shadow：阴影
outline：轮廓

四、实际示例

<div class="parent" style="color: blue;">
  <p class="initial">initial</p>
  <p class="inherit">inherit</p>
  <p class="unset">unset</p>
</div>

.initial {
  color: initial; /* 恢复默认值，即 black */
}

.inherit {
  color: inherit; /* 继承 parent 的 blue */
}

.unset {
  color: unset; /* 可继承属性，效果同 inherit，即 blue */
}

五、小结

如果想 恢复默认值 ，用 initial
想 继承父元素的值 ，用 inherit
不确定属性是否可继承，但想 根据情况同时支持 inherit/初始化，用 unset

同时，请记住：CSS 中很多属性是不可继承的，若想继承需要显式指定 inherit，特别是一些布局、宽高、边距相关属性。