CSS理解样式表层叠

在网页中，添加样式的方法有三种：嵌入式样式表，外部样式表和内联样式表。

优先级算法按照先后顺序考虑一下三个方面：

　　1.css规则的重要性和来源；

　　2.css规则的特殊性；

　　3.css规则在文档中出现的顺序；

 

一、找到选择器匹配特定元素的所有声明；

二、根据样式声明的重要性和来源进行优先级排序

　　重要性有两种：带“！important”定义的声明和不带“！important”定义的声明。在CSS规则后添加！important的重要性要高于没有添加的。

　　来源有三种样式：浏览器默认、开发人员定义的样式、用户在浏览器中定义的样式。

　　　　重要性和来源的优先级排序从低到高是：

　　　　　　1.浏览器默认样式

　　　　　　2.用户在浏览器中定义样式中的normal规则

　　　　　　3.开发人员定义的样式中的normal规则

　　　　　　4.开发人员定义的样式中的important规则

　　　　　　5.用户在浏览器中定义的important规则

三、按照特殊性（Specificity）排序

　　指定越详细的选择器将覆盖更一般的选择器。

　　CSS将计算多个规则中指定每一个规则的选择器的特殊性值，值越高，优先级越高。

　　特殊性值是一个由4个整数组成的一个类似数组的值：a，b，c，d，其中a的权重最高，依次类推，d的权重最低。

　　计算方法：

　　①如果该规则是一条内联样式，那么a=1，否则a=0；

　　②如果该规则由选择器指定，选择器中出现的id选择器的数量就是b的值；

　　③如果该规则由选择器指定，选择器中出现的属性选择器（包括类选择器）或者伪类选择器的数量总和就是c的值；

　　④如果该规则由选择器指定，选择器中出现的元素选择器或者是伪元素选择器的数量总和就是d的值；

　　⑤通配符选择器*的特殊性值为0，0，0，0。

　由于a的权重最高，因此首先比较a，在a相同的情况，再比较b，依次类推。因此无论b，c，d值有多大，内联样式总是具有最高的特色性。

四、比较CSS规则在文档中出现的顺序

　　如果两条规则有相同的重要性、来源和特殊性值，那么，出现在后面的总是比出现在前面的具有更高的优先级。

转载于:https://www.cnblogs.com/LisaY/p/4702937.html