css继承是层叠样式表的核心特性之一，指的是当给某个父元素设置特定css属性时，其符合条件的子元素会自动获得该属性的对应值，不需要单独为子元素重复编写相同的样式规则。这一特性可以大幅减少样式代码的冗余，让css结构更简洁，也方便后续对全局样式的统一调整。
css继承的基本规则
并不是所有css属性都支持继承，通常和文本、字体、列表相关的属性大多支持继承，而和盒模型、定位、背景相关的属性基本不支持继承。常见的支持继承的属性包括color、font-size、font-family、text-align、line-height等，不支持继承的属性包括width、height、margin、padding、border、background等。
继承示例演示
下面通过一个简单的html结构演示css继承的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
/* 父元素设置可继承的属性 */
.parent {
color: #333;
font-size: 16px;
font-family: "Microsoft YaHei";
/* 不可继承的属性 */
width: 500px;
border: 1px solid #ccc;
}
/* 子元素单独设置部分属性覆盖继承值 */
.child {
color: #f00;
font-size: 14px;
}
</style>
</head>
<body>
<div class="parent">
父元素文本
<div class="child">
子元素文本
<span>孙元素文本</span>
</div>
</div>
</body>
</html>
上述代码中，父元素的font-family属性会被子元素和孙元素继承，所以所有文本都会使用微软雅黑字体。而color和font-size被子元素重新定义，所以子元素和孙元素的颜色为红色，字体大小为14px。父元素的width和border不会继承，所以子元素和孙元素没有对应的宽度和边框样式。
控制css继承的特殊属性
css提供了两个特殊属性来控制继承行为，分别是inherit和initial。
inherit关键字
inherit可以让元素强制继承父元素的对应属性值，即使该属性默认不支持继承。比如下面的例子中，让子元素继承父元素的边框样式：
.parent {
border: 2px solid #06c;
padding: 10px;
}
.child {
/* 强制继承父元素的border属性 */
border: inherit;
/* 强制继承父元素的padding属性 */
padding: inherit;
}
initial关键字
initial可以让元素使用属性的初始值，忽略继承来的值。比如子元素原本继承了父元素的color属性，使用initial后会恢复为浏览器默认的黑色文本：
.parent {
color: #f00;
}
.child {
/* 使用color属性的初始值，即黑色 */
color: initial;
}
css继承与优先级的关系
css继承得到的样式优先级是最低的，低于元素本身的样式、内联样式、id选择器、类选择器、标签选择器等定义的样式。如果子元素本身有对应属性的定义，会优先使用自身的样式，而不是继承父元素的值。下面通过表格展示不同样式来源的优先级顺序：
| 样式来源 | 优先级权重 |
|---|---|
| 内联样式 | 1000 |
| id选择器 | 100 |
| 类选择器、属性选择器、伪类选择器 | 10 |
| 标签选择器、伪元素选择器 | 1 |
| 继承的样式 | 0 |
比如父元素用类选择器设置了color: blue，子元素用标签选择器设置了color: green，那么子元素的文本会显示绿色，因为标签选择器的优先级高于继承的样式。
css继承的常见使用场景
实际开发中，通常会给body元素设置基础的文本相关样式，利用继承特性让页面所有元素默认使用统一的字体、字号和文本颜色，减少重复代码：
body {
font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
font-size: 14px;
color: #333;
line-height: 1.5;
}
这样页面内所有的文本元素都会自动继承这些样式，不需要逐个为p、span、div等元素设置相同的文本属性，后续如果需要调整全局文本样式，只需要修改body的样式即可，维护成本更低。