首先我们需要搞清楚我们为什么需要知道层叠样式？什么是层叠样式？
什么是层叠样式？
层叠样式是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。这是来自MDN上面的解释，大概意思就是网页是怎么渲染HTML上的元素的。
我们为什么需要学习层叠样式呢?
其实我们就是需要通过学习层叠样式了解浏览器是如何渲染CSS 元素的，以此来解决声明冲突的问题。
1.比较重要性
重要性从高到低:
作者样式表：开发者书写的样式
1）作者样式表中的 !important 样式
color: rebeccapurple !important;
最高级的样式（一般不建议用，不利于维护）
2)作者样式表中的普通样式
3)浏览器默认样式表中的样式
2.比较兼容性
看选择器
总体规则：选择器中的范围越窄，越特殊
具体规则：通过选择器，计算出一个四位数（××××）
1、千位：如果是内联样式，记1，否则记0。
2、百位：等于选择器中所有id选择器的数量
3、十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
4、个位：等于选择器中所有元素选择器、伪元素选择器的数量
如何改变原有的样式？
最简单的方法就是加一个上一级div中的类选择器或者其他的选择器。
平常过节的时候如何改变代码的皮肤？
link一个文件，过完节日的时候直接在网页中将的link元素
去除就可以了
3.比较原次序
解决的问题：
解决当代码的兼容性一样的时候，如何比较代码的优先级呢？这时候就要比较代码之间的原次序。
规则：代码书写靠后的胜出
具体的应用
1.重置样式表
书写一些作者样式，覆盖浏览器的默认样式
重置样式表覆盖掉浏览器的默认样式表
重置样式表 -> 浏览器的默认样式表
常见的重置样式表：normalize.css、reset.css、meyer.css.
重置样式表有什么作用呢？
提高代码的复用性，重置样式表中一般会设有特定的一些h1,h2或者是其他的一些代码的样式。
要设置自己的样式的时候只需要将自己的文件link在重置样式表的下面即可
2.爱恨法则
link > visited > hover > active