层叠
作用与定义
不同样式表以及相同样式表的规则在整合之后，可能会有一些规则是冲突的，即多个规则同时描述同一个属性，且描述的效果不同。
而在冲突的样式规则中确定具体生效的规则的过程叫做层叠。
层叠值
在元素进行渲染的时候，用户代理会确定哪些规则与元素匹配。然后进行层叠操作，最后得到要应用哪个规则。而这个实际被应用的规则，我们叫做层叠值。
样式表的来源及权重
css样式表的声明以来源进行分类，可以分为3类：作者样式表，用户样式表，用户代理样式表。权重也是按顺序从高到低。
- 作者样式表其实指的就是我们程序员所编写的css。包括行内样式、外部样式、内部样式。
- 用户样式表：有些浏览器有自带功能，让用户设置一些元素的样式，这种样式被称为用户样式表。
- 用户代理样式表，浏览器默认的样式。
特指度
定义
特指度其实就是描述这个规则选择器的优先级的一个数据。
用户代理【浏览器】会计算每个声明中选择符的特指度，然后将其依附在声明中的每个规则上。
不同选择器的特指度
- 行内样式的特指度为 1，0，0，0.
- ID选择器的特指度为0，1，0，0.在所有选择器中优先级最高。
- 类选择器、属性选择器、伪类选择器的特指度为0，0，1，0
- 标签选择器以及伪元素选择器特指度为0，0，0，1
- 连结符【组合器】和通用选择器不增加特指度，即特指度为0,0,0,0。
注意
- id选择器与选择id属性的属性选择器是有区别的，前者的特指度为0，1，0，0，后者的特指度为0，0，1，0
如何计算一个css规则的特指度
声明中所有选择器的特指度之和，便为这个css声明的特指度，也为css声明中的每一条规则的特指度。
例如：*.a a特指度为 0，0，1，0 + 0，0，0，1 = 0，0，1，1
声明打散与特指度
当一个选择器的特指度进行确定之后，其值将赋予关联的每一个声明。
之后用户代理会将这个声明进行打散，将这个声明分为无数个只描述一个属性的规则的声明，当然，打散后的声明的选择器和打散前的一样。
这样用户代理就可以将整个声明的特指度对应在每一个属性的描述规则上。
实例：
h1 {
color: blue;
background: black;
}
打散后
h1 {
color: blue
}
h1 {
background: black;
}
有分组选择器的声明在进行打散的时候，则会先根据分隔符","，将选择器进行打散。
例如：
h1,h2 {规则a;规则b;}
将被打散为
h1 {规则a;规则b;}
h2 {规则a;规则b;}
之后再进行每个声明的打散操作。
重要性
作用
有时候某些声明特别重要，重要性远超过其他特指度相同的声明，可以通过在该规则的分号之前，加上!important标记。
若是加错了，那么这个规则所在的声明【花括号中的所有规则】是会直接失效的
冲突处理
- 若是带
!important的规则与不带!important的规则冲突，那么层叠值为带!important的规则 - 若是带
!important的规则冲突了，那么才会将冲突的规则忽略!important，然后根据后面介绍的层叠规则去判断冲突的规则之中谁为层叠值。
实例：假如html文档中有个class为test的h1标签。
h1 {
color: black !important;
}
* {
color: red !important;
}
.test {
color: blue;
}
首先因为.test的规则虽然冲突了，但是没有!important。所以只看剩余两个冲突的规则。
h1的特指度为 0,0,0,1 大于 *的特指度0,0,0,0。 所以最后h1的颜色为黑色。
层叠过程
- 找到匹配元素的所有规则
- 按重要性将规则排序，
!important标记的规则权重大于未标记的规则。 - 按来源的权重将规则排序。
- 按特指度将规则排序，特指度高的权重大。
- 按声明的位置进行规则的排序，写在后面的权重大。
继承
定义
将一个元素的某些属性值传给其后代的机制叫继承。
因为文档在渲染的时候是先将HTML的内容转换为DOM树，所以一个节点的某些属性值可以传递给他在DOM树结构中的子节点。
特点
- 属性不会向上传播，即，子节点的属性并不会传递给它的父节点。
- 并不是所有的属性都会继承。得看具体属性支不支持。
- 继承的值没有特指度！连特指度为0的规则都能比他要优先！！！ 。所以*【通用符选择器】所规定的样式规则会将继承值覆盖掉。
