CSS样式的作用范围不仅局限于当前选中的元素，父元素的很多样式属性会传递到子元素上，同时不同来源的样式会根据优先级规则相互覆盖，这也是很多页面样式异常的核心原因。掌握CSS继承与覆盖的规则，是前端开发者的必备技能。
CSS继承的核心规则
CSS继承指的是某些样式属性会自动从父元素传递到子元素，不需要开发者额外为子元素设置。但并不是所有属性都支持继承，通常和文本、字体、颜色相关的属性大多可以继承，而和布局、盒模型相关的属性大多不能继承。
可继承的常见属性
- 字体相关：
font-family、font-size、font-weight、font-style - 文本相关：
color、text-align、line-height、text-indent - 列表相关：
list-style、list-style-type - 其他：
visibility、cursor
不可继承的常见属性
- 盒模型相关：
width、height、margin、padding、border - 布局相关：
display、position、float、flex相关属性 - 背景相关：
background、background-color、background-image
父元素样式影响子元素的常见场景
当父元素设置了可继承的样式属性时，子元素如果没有单独设置该属性，就会默认使用父元素传递下来的样式。如果子元素本身设置了同属性样式，就会触发样式覆盖规则。
场景1：可继承属性自动传递
比如父元素设置了color为红色，所有没有单独设置color的子元素文本都会显示为红色，即使子元素是嵌套多层的后代元素也会生效。
/* 父元素设置可继承的color属性 */
.parent {
color: red;
font-size: 16px;
}
/* 子元素没有设置color，会继承父元素的红色 */
.child {
/* 这里不需要写color，会自动继承 */
}
场景2：不同选择器优先级导致的覆盖
如果父元素和子元素都设置了同一个可继承属性，会根据选择器的优先级决定最终生效的样式。优先级从高到低依次是：内联样式、ID选择器、类/属性/伪类选择器、元素选择器、继承样式。
比如下面的代码中，子元素的类选择器优先级高于父元素的元素选择器，所以子元素文本会显示为蓝色，而不是父元素的红色。
div {
color: red; /* 元素选择器，优先级低 */
}
.child-class {
color: blue; /* 类选择器，优先级高，覆盖父元素继承的红色 */
}
场景3：!important强制提升优先级
如果父元素的样式添加了!important，那么继承下来的样式优先级会超过子元素普通声明的同属性样式，除非子元素的样式也添加!important。
.parent {
color: red !important; /* 带!important的继承样式 */
}
.child {
color: blue; /* 普通声明，无法覆盖父元素的!important样式，最终显示红色 */
}
父元素样式影响的解决方案
当父元素样式对子元素的影响不符合预期时，可以根据具体场景选择对应的解决方案。
方案1：为子元素单独设置样式
最直接的方式是给子元素单独设置目标属性，只要子元素选择器的优先级不低于父元素继承样式的优先级，就能覆盖父元素的样式。
/* 父元素设置可继承的字体大小 */
.parent {
font-size: 20px;
}
/* 子元素单独设置字体大小，覆盖继承的值 */
.parent .child {
font-size: 14px;
}
方案2：使用更具体的选择器
如果子元素的选择器优先级不够，可以提升选择器的具体程度，比如增加父元素的选择器前缀，或者使用ID选择器（不推荐过度使用ID选择器）。
/* 父元素样式 */
.container {
color: gray;
}
/* 提升选择器具体程度，覆盖父元素样式 */
.container .content .text {
color: black;
}
方案3：使用初始值或继承控制属性
如果希望子元素完全不使用父元素继承的样式，可以使用initial关键字将属性重置为初始值，或者使用inherit关键字强制继承某个属性（即使该属性默认不可继承）。
/* 父元素设置了color */
.parent {
color: red;
}
/* 子元素重置为初始值，不继承父元素的红色 */
.child-reset {
color: initial;
}
/* 强制继承父元素的border属性（默认不可继承） */
.child-inherit {
border: inherit;
}
方案4：避免滥用!important
尽量不要在全局样式或者父元素样式中使用!important，这会导致后续样式覆盖非常困难。如果已经存在!important的样式，子元素需要覆盖时也需要添加!important，但这种方式会让样式优先级混乱，不建议长期使用。
样式优先级计算参考
CSS选择器的优先级可以通过数值计算，方便开发者判断样式覆盖结果，计算规则如下：
| 选择器类型 | 优先级数值 | 示例 |
|---|---|---|
| 内联样式 | 1000 | <div style="color:red"></div> |
| ID选择器 | 100 | #header |
| 类/属性/伪类选择器 | 10 | .class、[type="text"]、:hover |
| 元素/伪元素选择器 | 1 | div、::before |
| 继承样式 | 0 | 父元素传递的样式 |
计算时把对应选择器的数值相加，数值高的优先级更高，数值相同则后声明的样式覆盖先声明的样式。