CSS-层叠样式比较（样式冲突的取舍）

以上面的截图为例，在实际的开发过程中随处可见同一个样式被多次应用到同一个元素当中产生的声明冲突。

为了解决样式的声明冲突，浏览器会通过权重计算进行处理。

比较过程

1.比较重要性

作者样式表：开发者书写的样式

1.作者样式表中的 !important 样式
2.作者样式表中的普通样式
3.浏览器默认样式表中的样式

从上图可以看出即使我的 类选择器的优先级高于元素选择器（在第2点会指出），但由于有 !important ，优先级还是最高

2.比较特殊性（看选择器）

总体规则：选择器选中的范围越窄，越特殊

简单的理解 就是我选择器选中的范围越小则优先级越高

由于 类选择器".green" 选中的的范围比 元素选择器"p" 选中的范围更小，所以优先级更高。

具体规则：通过选择器分别计算出4位数字进行比较

• 第一位：如果是内联样式，记1，否则记0
• 第二位：选择器中所有id选择器的数量
• 第三位：选择器中所有类选择器、属性选择器、伪类选择器的数量
• 第四位：选择器中所有元素选择器，伪元素选择器的数量

由于这个在文章中不好演示，所以我去MDN官方文档中扒了一张图，可以理解下图为从第二、三、四位数字的计算

计算出这4位数字后会按顺序进行比较（比如说第一位值相同才比较第二位）

3.比较源次序（资源/代码顺序）

可以理解为后面的规则覆盖前面的规则，直到最后一个开始设置样式。（最后书写的代码胜出）

注意：比较顺序会依次进行，多个样式比较时，当比较第1点胜出则不会进行后续比较，当第1点比较一致则会进行第2点比较，依次类推