css——层叠

1.层叠是一种机制，用于解决css声明间的冲突。

css冲突：多个相同的成熟时声明，用于同一个元素就会产生冲突。

2.层叠的过程

【1】比较优先级

每个声明否具有一个优先级，当声明发生冲突时，会保留优先级高的，淘汰优先级低的。 
一个声明的优先级与他的来源和重要性有关。
来源一般分为三部分：浏览器默认样式，作者样式，用户样式 
从优先级高到低的排列顺序为：用户样式，作者样式，浏览器默认样式。
重要性：如果某属性值后跟上一个“！importent”，则表示一条重要声明，否则都是普通声明。
列：

p{color：red；}/*普通声明*/
p{color：red importent；}/*重要声明*/

【2】比较特殊性（specificity）

当声明发生冲突时，特殊性高的会保留，特殊性低的会淘汰。
声明的特殊性取决于规则实际用的范围大小，规则适用范围越小，特殊性越高，反之，特殊性越底。 
注：

*{声明块}/*通配符选择器，他的应用范围是整个页面*/
html{声明块}/*这两个选择器时范围最大的选择器*/

常见样式特殊性由高到低排行： 
1.行内样式 
2.id选择器 
3.类选择器 
4.元素选择器 
5.通配符选择器

【3】比较特殊性时，实质是比较声明的特指值（数值）

我们假设:
行内样式生成的值为（是行内样式生成1否则为0）：a
id选择器个数生成的值为：b
类及伪类选择器个数生成的值为：c
元素及伪元素选择器个数生成的值为：d 
每一条声明的a与a，b与b，c与c，d与d的值进行对比，若得到一个最大的a值，与最大值对应的这条声明特殊性就越高，如果没有最大值则比较b的值，比较方法与a相同，以此类推……html元素将使用最大值对应的声明。

原文地址：https://www.cnblogs.com/xhh776554/p/8849516.html