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">initialp>
  <p class="inherit">inheritp>
  <p class="unset">unsetp>
div>

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

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

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

---

五、小结

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

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