1. 引言&概述

我们前面学过，CSS 是层叠样式表，多个样式会作用在同一个 HTML 元素上。

但我们通常会发现，并非所有样式会同时起作用。

例如：以下多段 CSS 代码同时作用于某 div 标签，多个样式显示效果为 红色。

所以，为了更好地认识 CSS 样式调节，我们需要学习 CSS 的三大特性。

这三大特性分别为：层叠性、继承性、优先级

下面我们来逐步深入。

2. 层叠性

层叠性：为相同选择器设置相同样式。

作用：解决样式冲突问题。

准备代码：

代码效果：

分析效果：

层叠原则总结：

1、 样式冲突，遵循“就近原则”/“最后原则”，哪个样式离标签最近，哪个样式最后设置，就执

行哪个样式

2、 样式不冲突，就不会出现完全 层叠覆盖。

3. 继承性

继承性：在 CSS 中，子元素可以继承父元素的某些样式。（

text- ， font- ， line- ， color 等）

作用：简化页面 CSS 代码，降低 CSS 样式复杂度。

课堂练习：请通过继承性，编写 CSS 代码，实现以下效果

效果：

4. 优先级

4.1 单优先级权重算法

优先级：当多个选择器样式同时作用在某一元素上，优先选择生效哪个样式，就是优先级。

优先级作用说明：

选择器相同，则执行层叠性

选择器不同，计算选择器权重，权重大的生效。

选择器权重算法：由 A,B,C,D 四个值组成

值大小顺序：A>B>C>D

例如：1,0,0,0 大于 0,1,0,0

1,0,0,0 大于 0,12,0,0

0,1,0,0 大于 0,0,1,1

0,1,1,0 大于 0,1,0,0

总之： 1 、 某一位可以不断累加数字，不会向其他位进位

2 、 A 位永远大于 BCD 位，无论其他位数字多少

B 位永远大于 CD 位，无论 CD 位数字多少，以此类推

权重换算表：

准备代码： 用于课堂练习

示例代码：

效果及分析

4.2 复合优先级权重算法

开发中，我们经常遇到的是复合选择器，而非单一选择器

所以我们要结合 权重换算表 学习复合优先级权重算法。

1、 出现一次 行内样式，权重中，A 位+1

2、 出现一次 ID 选择器，权重中，B 位+1

3、 出现一次 类选择器 或 伪类选择器 或 属性选择器，权重中，C 位+1

4 、 出现一次 标签选择器 或 伪元素选择器 ，权重中， D 位 +1

思考：为什么以下代码，最终展示效果为蓝色

4.3 最大优先级设置

在开发中， 为了测试方便，有时我们会提升一段样式代码的优先级到最大，用以展示测试效果。

格式：!important

示例代码：

效果实现：

注意事项：

一般用于前端框架开发中，进行代码测试。

开发者开发中尽量不要使用。

（否则导致 JS 控制样式失败，因为 JS 写出的是行内样式，优先级低于 !import ）

4.4 总结

多个选择器在选择哪个样式起作用时，优先级高的起作用。

使用权重判断优先级。

权重由四位组成：A,B,C,D

值大小顺序：A>B>C>D

复合优先级权重运算方式：

行内样式是 A 位，1,0,0,0

出现一次 ID 选择器，权重中，B 位+1

出现一次 类选择器 或 伪类选择器 或 属性选择器，权重中，C 位+1

出现一次 标签选择器 或 伪元素选择器 ，权重中，D 位+1