CSS层叠顺序以及选择器特殊性计算

CSS层叠顺序

为了找到元素的特性的指定值，用户端即浏览器要经历如下的排列顺序：

1、判断目标媒介类型mediatype

2、比较样式来源和重要性（是否含！important）

优先级排列从小到大：

1）用户端声明( UAdeclarations )

2）一般用户声明( usernormal declarations )

3）一般作者声明(author normal declarations )

4）加了'!important' 的作者声明( authorimportant declarations )

5）加了'!important' 的用户声明(user important declarations )

3、比较选择器特殊性

注意：选择器的特殊性比较只在来源相同，且相同重要性的规则之间进行。如都来自作者样式表，且都带有或都不带有！important。对于一个来源不同，或一个带有！important另一个不带有！important的规则是不需要比较选择器特殊性的。

4、比较先后顺序

如果两条规则具有相同的来源，相同的选择器特殊性，则后出现的规则会覆盖先出现的规则。

选择器特殊性计算

一个选择器的特殊性由四个数组成，表示为0.0.0.0,比较时先比左第一位，大则胜出，相等则比下一位：

第1位

若有内联样式则置1

即1.0.0.0

第2位

选择器中id的个数

如#id1 #id2{ } 对应0.2.0.0

第3位

选择器中class、伪类、属性的个数

.a.b[type="text"]:hover{ } 对应0.0.4.0

第4位

选择器中元素、伪元素的个数

h1:first-letter{ } 对应0.0.0.2

常见伪类

:hover :link :visited :active  :focus  :first-child  :lang

常见伪元素

:first-letter  :first-line  :before  :after

补充说明

通配符（*）和继承来的CSS没有任何特殊性