层叠：浏览器通过考虑，继承、特殊性、重要性（权重）等来确定元素属性值的过程（同时也是解决冲突的过程）。所以要从这三个方面来进行分析。
特殊性
故名思意，对于复合的选择器都对应一个特殊性值，特殊性越高，越优先被采用，既然每个选择器都对应一个特殊性值，那么值该怎么计算？
特殊性值的计算
选择器的特殊性由选择器本身的组件来确定，对于特殊值的描述分为4个部分：0,0,0,0.
单一选择器的特殊性：
1、ID选择器：0，1，0，0.
2、类选择器或属性选择器、伪类：0，0，1，0
3、元素选择器：0，0，0，1
4、结合符和通配选择器：0，0，0，0
5、内联样式的特殊性：1，0，0，0
对于复合选择器计算：
现根据上述定义的值确定选择器特殊性值，然后以从左向右的顺序排列。
如 p#test{color:red;} p{color:green;}.前者的特殊值为0，1，0，1.而后者为0，0，0，1。根据从左向右的规则，第二个数字，前者为1，后者为0，1>0，所以前者特殊性更高。
重要性
重要性称为权重也不为过，样式的重要性受两个方面影响：! important规则和样式表来源。
! important规则：
必须正确地放置! important 否则无效。! importatnt 总是放在声名的最后，即分号前面。
其实！important会将声名分为两类“重要”和“不重要”，如果两类之间发生冲突，胜出的总是重要的。当然这里你会迷惑，你给我讲这个做什么？别着急，最终目标是层叠。
样式表来源
根据 CSS 样式的来源和重要性(是否含 !important )，给出了优先级的升序排列：
用户端声明
一般用户声明
一般作者声明
加了 '!important' 的作者声明
加了 '!important' 的用户声明
继承
继承：从一个元素向其后代元素传递属性值所采用的机制。与文档的结构树密切相关。开头的表述可以更加清晰点，当元素采用某个声明时，这个值将沿着文档树向下传递到后代元素，并且一直延续，一直到没有元素可以继承为止。另外，绝对不会向上发生传递。
文档结构树：每个合法的文档都会生成一个结构树。
注意：1、有些属性不能被继承。如边框、盒模型的属性2、继承值无特殊性。
有些属性不能被继承
那边框举例子。一个父元素有边框，其他子元素全是边框，这就会导致非常尴尬的结果。
继承值无特殊性
无特殊性和0特殊性是区别的，并且0特殊性>无特殊性。通配选择器的特殊性就是0。
<p>今天我也要学<em>层叠样式表</em><p> p{color:white}. *{color:red} “层叠样式表”文字的颜色就是红色。
层叠
终于到最后啦，也是最重要的！先来回答一个问题。如果两个选择器特殊性相同，那么该用那个规则，p{color：red;} p{color:green}。其实可以通过层叠可以猜到。一层层的叠加。那么答案就是越后出现的优先级越高。
层叠的规则
1、找出所有相关的规则，这些规则都包含一个给定元素匹配的选择器。
2、按照重要性对规则分组排序。
3、按特殊性对每组内的规则排序。
4、按顺序排序。对序号相同的规则，按照出现的先后来排序。
上面这些规则似乎有些抽象，还是拿图来看直接。
HTML部分
CSS部分
最后的结果就很容易得到了。嘿嘿，就是hotpink色。
到这里就完了。如果对你有帮助的话给我点个👍呗！！！
我是个新人，但是会持续分享自己学习前端的知识，都在进步的路上，大家共同加油哦！
