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的特指度更高。

层叠规则四：

顺序决定权重。

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