【网页前端】CSS的三大特性层叠性、继承性、优先级
👀专栏介绍
【前端网页】 目前主要更新HTML，一起学习一起进步。
👀本期介绍
本期主要介绍CSS的三大特性层叠性、继承性、优先级
文章目录
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
腾讯云开发者
