
这里是【前端网页】,关注我学习前端不迷路
如果对你有帮助,给博主一个免费的点赞以示鼓励
欢迎各位点赞评论收藏⭐️
专栏介绍
【前端网页】 目前主要更新HTML,一起学习一起进步。
本期介绍
本期主要介绍CSS的三大特性层叠性、继承性、优先级
文章目录
1. 引言&概述
2. 层叠性
3. 继承性
4. 优先级
4.1 单优先级权重算法
4.2 复合优先级权重算法
4.3 最大优先级设置
4.4 总结
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
