层叠机制

Posted 2020-11-20 xsg1

在css里，同一个样式的不同属性值应用于同一个标签则会产生声明冲突。

例如：

一旦出现声明冲突，浏览器会自动生成层叠机制。

层叠的过程

1.比较优先级

声明的优先级主要是看来源及重要性

来源：作者样式表、浏览器默认的样式表、用户样式表

按优先级从高到低:用户样式表>作者样式表>浏览器样式表

重要性：判断声明块里是否有！important，如果有，则表示是重要声明，将应用这个样式，反之为普通声明

当优先级为同级的时候则进入比较特殊性

2.比较特殊性

优先级：行内选择器>ID选择器>类选择器>元素选择器>通配符选择器

表示选择范围大的优先级低，选择范围小的优先级高

具体规则：每一个冲突的声明，会生成4个数字a,b,c,d

a：若声明为行内选择器，则为1，反之为0；

b：规则中id选择器的个数

c：规则中类选择器、伪类选择器的个数

d：规则中元素选择器、伪元素选择器的个数

通配符的特殊值为0

比较特殊性a越大，特殊性越高，若a相同，则比较b，比较特殊性b越大，特殊性越高，若b相同，则比较c,依次类推；

若特数值都相同，则比较源次性

3.比较源次性

最后出现的声明获胜，其他的全部淘汰

如上图，由于优先级、特殊性都相同，则比较源次性，由于第二个color为最后声明，所以采用color:green这个样式；