CSS之层叠值

关于CSS，大家可能看到“层叠”这个词有点陌生，但是我们却一直都在使用。

何为层叠？

层叠会在众多CSS样式解析样式规则，解决冲突，为每个CSS属性设置一个最终值。可以理解就是样式优先级的过程。

层叠的规则

1. 样式表的来源，样式表有两个来源，即用户自定义样式表和浏览器默认样式表

2. 选择器优先级，哪些选择器比另一些选择器更重要

3. 源码的顺序，样式在样式表或者html页面中的声明顺序

样式表

由于样式表只有两种来源，所以优先级很简单，用户自定义样式表高于浏览器默认样式表。

选择器

1. 行内样式：

指的就是在html元素上使用style属性应用的样式。行内样式大于一切选择器，小于important

2. 选择优先级：

优先级的准确规则如下。

如果选择器的ID数量更多，则它会胜出(即它更明确）.。..如果ID数量一致，那么拥有最多类的选择器胜出。.

如果以上两次比较都一致，那么拥有最多标签名的选择器胜出。

上述代码优先级为：4>3>2>1

样式4因为有ID选择器存在，优先级最高。

样式3由于有两个类选择器，大于样式2的一个类。

样式2有一个选择器，大于样式1的4个标签选择器。

优先级还有一个数字表示方法：0,0,0

比如：1,2,0 就表示这个优先级是由1个ID，2个class，0个标签组成的选择器。

例子：#page .box ul li，用数字表示就是1,1,2

数值越大，自然优先级也就越大。

3. Important：

使用important的样式则拥有最高的优先级，important的数量越多，则优先级越高。

源码顺序

如果两个样式的来源和优先级都相同，则只有通过样式出现的顺序来决定层叠值，后面的样式会覆盖前面的样式。