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没有任何特殊性