你想系统掌握 CSS 中「继承属性」的核心知识，包括哪些属性可继承、继承的规则、如何控制继承（继承/取消继承），这是前端样式复用和避免冗余代码的关键。下面我会用「可继承属性分类+示例+继承规则+实操技巧」帮你彻底理清，所有示例都是可直接运行的纯原生 CSS/HTML 代码。
CSS 继承属性全解析（纯原生版）
一、核心概念：什么是 CSS 继承？
CSS 继承是指「子元素自动沿用父元素的某些样式属性值」，无需重复设置------比如给 <body> 设置 font-size: 14px，页面中所有文字元素（<p>/<span>/<li> 等）都会自动继承这个字体大小，减少重复代码。
关键分类
| 类型 | 说明 |
|---|---|
| 可继承属性 | 子元素自动继承父元素的属性值（如文字样式） |
| 不可继承属性 | 子元素不会继承，需手动设置（如布局/盒模型属性） |
二、常用可继承属性（按场景分类，必记）
1. 文字/字体相关（最常用）
这类属性是继承的核心，几乎所有行内/块级文本元素都会继承。
| 属性 | 作用 | 示例值 |
|---|---|---|
font-family |
字体类型 | Microsoft Yahei |
font-size |
字体大小 | 14px/1.2em |
font-weight |
字体粗细 | 400/bold |
font-style |
字体样式（斜体） | normal/italic |
color |
文字颜色 | #333/red |
line-height |
行高 | 1.5/20px |
text-align |
文本水平对齐 | center/left |
text-indent |
文本缩进 | 2em/20px |
letter-spacing |
字间距 | 2px/-1px |
word-spacing |
单词间距（英文） | 3px |
示例代码：文字属性继承
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文字属性继承</title>
<style>
/* 父容器设置文字样式 */
.parent {
font-family: "Microsoft Yahei";
font-size: 16px;
color: #666;
text-align: center;
line-height: 1.8;
}
/* 子元素无需重复设置，自动继承 */
.child {
/* 仅需设置特有样式，如背景色 */
background: #f5f5f5;
padding: 10px;
}
</style>
</head>
<body>
<div class="parent">
父容器文字（16px，灰色，居中）
<div class="child">子元素文字（自动继承父容器的字体/大小/颜色/对齐）</div>
</div>
</body>
</html>2. 列表相关
列表的样式属性会继承，简化列表排版。
| 属性 | 作用 | 示例值 |
|---|---|---|
list-style-type |
列表标记类型 | disc/none/decimal |
list-style-position |
列表标记位置 | inside/outside |
list-style |
列表样式简写 | none/decimal inside |
示例代码：列表属性继承
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>列表属性继承</title>
<style>
/* 父容器设置列表样式 */
.list-wrap {
list-style: decimal inside; /* 数字标记，在列表项内部 */
color: #f60;
}
/* 子列表自动继承父样式 */
.sub-list {
/* 仅修改特有样式，如缩进 */
margin-left: 20px;
}
</style>
</head>
<body>
<ul class="list-wrap">
<li>父列表项1</li>
<li>父列表项2
<ul class="sub-list">
<li>子列表项1（自动继承数字标记+橙色）</li>
<li>子列表项2</li>
</ul>
</li>
</ul>
</body>
</html>3. 光标/可见性相关
这类属性继承主要用于交互场景。
| 属性 | 作用 | 示例值 |
|---|---|---|
cursor |
鼠标光标样式 | pointer/default |
visibility |
元素可见性 | visible/hidden |
示例代码：光标属性继承
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>光标属性继承</title>
<style>
/* 父容器设置光标为手型 */
.btn-wrap {
cursor: pointer;
width: 200px;
padding: 10px;
border: 1px solid #63a9c4;
text-align: center;
}
/* 子元素自动继承手型光标 */
.btn-text {
color: #63a9c4;
}
</style>
</head>
<body>
<div class="btn-wrap">
<span class="btn-text">鼠标移过来变成手型（继承父容器）</span>
</div>
</body>
</html>补充：常见不可继承属性（避坑重点）
以下属性不会继承，需手动给子元素设置：
| 类别 | 具体属性 |
|---|---|
| 盒模型 | width/height/margin/padding/border |
| 布局 | display/position/top/left/flex/float |
| 背景 | background/background-color/background-image |
| 边框/轮廓 | border/outline/box-shadow |
| 定位/溢出 | z-index/overflow/opacity |
示例：不可继承属性验证
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>不可继承属性验证</title>
<style>
.parent {
width: 300px;
height: 100px;
background: #63a9c4; /* 背景色不继承 */
border: 1px solid red; /* 边框不继承 */
}
.child {
/* 子元素不会继承宽高/背景/边框，需手动设置 */
color: #fff; /* 文字颜色继承 */
}
</style>
</head>
<body>
<div class="parent">
<div class="child">子元素仅继承文字颜色，无宽高/背景/边框</div>
</div>
</body>
</html>三、控制继承的关键属性：inherit / initial / unset
CSS 提供了 3 个关键字，手动控制属性是否继承，是开发中灵活调整样式的核心技巧。
| 关键字 | 作用 | 适用场景 |
|---|---|---|
inherit |
强制子元素继承父元素的属性值 | 覆盖子元素的默认样式，沿用父样式 |
initial |
恢复属性的默认值（取消继承） | 子元素不想继承父样式，用默认值 |
unset |
若属性可继承则 inherit，否则 initial |
通用重置，简化代码 |
示例代码：控制继承的关键字
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>控制继承的关键字</title>
<style>
.parent {
font-size: 16px;
color: #666;
background: #f5f5f5;
}
/* 1. 强制继承（inherit）：子元素继承父元素的背景色（背景色默认不继承） */
.child-inherit {
background: inherit; /* 继承父元素的 #f5f5f5 */
padding: 5px;
}
/* 2. 取消继承（initial）：子元素文字颜色恢复默认（黑色） */
.child-initial {
color: initial; /* 取消继承，文字变成黑色 */
}
/* 3. 通用重置（unset）：可继承属性（font-size）继承，不可继承（border）用默认值 */
.child-unset {
font-size: unset; /* 继承父元素 16px */
border: unset; /* 边框默认值：none */
padding: 5px;
}
</style>
</head>
<body>
<div class="parent">
父容器（16px，灰色，浅灰背景）
<div class="child-inherit">child-inherit：继承父背景色</div>
<div class="child-initial">child-initial：文字颜色取消继承（黑色）</div>
<div class="child-unset">child-unset：字体继承，边框重置为默认</div>
</div>
</body>
</html>四、继承的核心规则（避坑必记）
1. 就近原则：子元素自有样式 > 继承样式
如果子元素手动设置了某属性，会覆盖继承的父属性值：
css
.parent { color: #666; }
.child { color: #f60; } /* 子元素显示橙色，而非父元素的灰色 */2. 继承的是「计算值」，不是「声明值」
父元素的属性值如果是相对单位（如 %/em），子元素继承的是「计算后的绝对值」：
css
.parent {
font-size: 16px;
line-height: 1.5; /* 声明值 1.5，计算值 16×1.5=24px */
}
.child {
/* 继承的是 24px，而非 1.5 */
line-height: inherit; /* 子元素行高为 24px */
}3. !important 不影响继承，但会覆盖子元素自有样式
css
.parent { color: #666 !important; }
.child { color: #f60; } /* 子元素仍显示橙色（自有样式） */
.child-no-style { /* 无自有样式，继承父元素的灰色（带 !important） */ }五、高频实战技巧（开发中常用）
1. 全局样式复用：给 body 设置基础文字样式
css
/* 全局文字样式，所有文本元素自动继承 */
body {
font-family: "Microsoft Yahei", sans-serif;
font-size: 14px;
color: #333;
line-height: 1.6;
}
/* 仅需给特殊元素设置特有样式 */
h1 { font-size: 24px; font-weight: bold; }
a { color: #0088ff; text-decoration: none; }2. 重置列表样式：取消继承的默认标记
css
/* 全局取消列表默认样式 */
ul, ol {
list-style: none; /* 取消默认标记 */
margin: 0;
padding: 0;
}
/* 特定列表恢复样式 */
.order-list {
list-style: decimal inside; /* 继承失效，手动设置 */
}3. 组件内样式隔离：取消继承避免样式污染
css
/* 弹窗组件，取消继承父元素的文字颜色/字体 */
.modal {
color: initial; /* 文字颜色用默认值 */
font-family: initial; /* 字体用默认值 */
background: #fff;
padding: 20px;
border: 1px solid #ccc;
}总结
- 核心可继承属性 ：文字/字体相关（
font-*/color/text-*）、列表相关（list-style-*）、光标（cursor）； - 不可继承属性：盒模型（宽高/边距/边框）、布局（display/flex）、背景（background）；
- 控制继承的关键字 ：
inherit：强制继承（如让子元素继承父背景色）；initial：取消继承，恢复默认值；unset：通用重置（可继承则继承，否则默认）；
- 实战技巧 ：
- 全局样式用继承（body 设置基础文字样式）；
- 组件样式用
initial/unset隔离，避免继承污染； - 就近原则：子元素自有样式优先于继承样式。
如果需要针对某类场景（如组件样式隔离、全局样式复用）写具体的代码示例，我可以进一步细化。