层叠样式（解决声明冲突问题）

首先我们需要搞清楚我们为什么需要知道层叠样式？什么是层叠样式？

什么是层叠样式？

层叠样式是一种 样式表 语言，用来描述 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