CSS - 深入了解（三大特性、css权重、属性值计算过程）

🌈个人主页：王子玉博客

🔆 免费专栏：HTML&CSS

❤️ 分享网站： 《Python自学网》👉👉基础入门到逐步深入 | 适合新手入门到精通

体系课程：Web开发、爬虫、自动化运维、自动化测试、GUI图形界面化
~~
🙏 如果觉得博主文章对你有所帮助的话，还望大家多多支持呀！关注 | 点赞 | 收藏 | 评论 ​

HTML& CSS系列文章类目

内容序列	文章链接
HTML& CSS（1）	HTML与HTML5 知识点梳理总结
HTML& CSS（2）	CSS - 初识 css（DOM树、引入方式、书写规则）
HTML& CSS（3）	CSS - 选择器（一文了解全部选择器及用法）

---

1、CSS三大特性（重点）

层叠 / 继承 / 优先级， 是学习CSS 必须掌握的三个特性。

1.1 CSS层叠性

层叠性是指多种CSS样式的叠加

层叠性是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会 将另一个属性层叠掉。

声明冲突：同一个样式属性，多次运用到同一个元素

层叠：解决声明冲突的过程，浏览器自动处理（权重计算，也就是优先级）

例如：

p{color: red;}
p{color: pink;}
/*一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准*/

如上面，先给p标签指定了红色,在后面又指定了颜色为粉色，这时就是一个标签指定了相同样式不同值得情况，这就是样式冲突。

一般情况下，如果出现样式冲突，则：

1、比较重要性（重要性从高到低）

1. 作者样式表中的 !important 样式
2. 作者样式表的普通样式
3. 浏览器默认样式表中的样式

2、 比较特殊性（看选择器）

• 总体规则：选择器选中的范围越窄，越特殊
• 具体规则：通过选择器，计算出一个4位数权重值(x, x ,x ,x) ，逐级比较

3、比较源次序

• 代码书写靠后的样式为准（特殊性一样的情况下）

1.2 CSS继承性

继承性是指书写CSS样式表时，当子元素没有设置样式时，会继承父元素的样式。

想要设置一个可继承的属性，只需将它应用于父元素即可。

简单的理解就是： 子承父业

注意：

1、恰当地使用继承可以简化代码，降低CSS样式的复杂性。

2、并不是所有的属性都可以继承，一般和字体文本相关的会继承

• 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的 都可以继承，以及color属性）

3、不只有子元素可以继承, 后代都可以继承

• 因为继承是一层一层的继承的,往上找着继承的

4、继承中的特殊属性

• 因为浏览器系统已经给了元素的默认值，元素本身的属性值大于继承的属性，属性的优先级问题，所以不会继承，除非在自己身上改变这属性值
• a标签的文字颜色和下划线、h标签的文字大小是不受继承影响

1.3 CSS优先级

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

在考虑权重时，还需要注意一些特殊的情况，具体如下:

1、继承样式的权重为0

即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，子元素的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

2、行内样式优先，远大于100

应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提到的选择器

都大的优先级。

3、权重相同时，CSS遵循就近原则。

也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

4、!important命令

CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

---

2、CSS权重的特殊性（Specificity）

CSS权重需要一套计算公式来计算，也就是 CSS Specificity，称为CSS 特性或非凡性，它是 衡量CSS值优先级的一个标准 。

specificity用一个四位的数字串来表示，可以理解为四个级别，值从左到右，左面的最大，级别依次递减， 数位之间没有进制，级别之间不可超越。

具体规范：如下

1.千位：如果是行内样式，记1，否则记0

2.百位：等于选择器中所有id选择器的数量

3.十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量

4.个位：等于选择器中所有元素选择器、伪元素选择器的数量

注意：

每个位置的数是逢256进1，计算出权值后直接从个千位开始逐级比较

通用选择器（*），子选择器（>）， 相邻选择器（+）等不在4等级之内，所以它们的权值都为 0，0，0，0，；

选择器(每个)	权重值
继承 或 * 或 > 或 +	0,0,0,0
标签（元素）	0,0,0,1
类、伪类	0,0,1,0
id	0,1,0,0
行内样式	1,0,0,0
!important	无穷大

权重叠加：举例如下

选择器	权重值
div ul li	0,0,0,3
.box a img	0,0,1,2
a:hover	0,0,1,1
#box a	0,1,0,1

总结：

权重是优先级的算法，层叠是优先级的表现。

---

3、属性值的计算过程

属性值的计算过程也叫页面渲染过程

整体渲染过程：一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行

渲染每个元素的前提条件：该元素的所有CSS属性必须有值

属性值计算过程：一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值计算过程

过程步骤：

1. 确定声明值： 参考样式表（作者样式表、浏览器默认样式表）中没有冲突的声明，拿来直接作为css属性值
2. 层叠冲突：对样式表中有冲突的声明使用层叠规则，确定css属性值
3. 使用继承： 对仍然没有属性值的属性，若可以继承，则继承父元素的值
4. 使用默认值： 对仍然没有值的属性，使用默认值（每个css属性都有默认值）

特殊的2个CSS取值：

inherit：手动（强制）继承，将父元素的值取出应用到该元素

• 在没有设置a{color:inherit;}的情况下，a标签不会继承父元素的颜色

initial：初始值，将该属性设置为默认值