css的层叠机制

css的层叠机制

浏览器层叠各个来源样式的顺序：

1浏览器默认样式；2用户样式表；3链接样式表；4嵌入样式；5行内样式；
前面出现的样式会被后面相同的样式覆盖

层叠规则一：

找到应用给每个元素和属性的所有声明。浏览器在加载每个页面时，都会据此查到每一条CSS规则，标识出所有受到影响的HTML元素。

层叠规则二：

按照顺序和权重排序。浏览器依次检查5个来源，并设定匹配的属性。如果匹配的属性在下一个来源也有定义，则更新该属性的值，如此循环，直到检查完页面中所有标签受影响属性的全部5个来源为止。最终某个属性被设定成什么值，就用什么值来显示。

层叠规则三：

按特指度排序 I-C-E

1.选择符中有一个ID，就在I的位置上加1；

2.选择符中有一个类，就在C的位置上加1；

3.选择符中有一个元素（标签）名，就在E的位置上加1；

4.得到一个三位数。

p                   0-0-1特指度=1
p .a               0-1-1特指度=11
p #main       1-0-1特指度=101

相同的属性 以特指度越大为准。

先比较第一位，再第二位，最后第三位。
0-1-12与0-2-0相比。仍然是0-2-0的特指度更高。

层叠规则四：

顺序决定权重。

如果两条规则都影响某元素的同一个属性，而且他们的特指度也相同，则位置考下的规则胜出。

如果哪里写错了，有疑惑可留言哦，谢谢指出，共同进步哦！