关于CSS样式的层叠顺序

CSS支持给同一元素多次设置相同的规则，这就是所谓竞争规则，浏览器会使用层叠顺序来确定一组竞争规则中生效的规则。例如，浏览器给每个元素设置默认规则，当我们给一个元素设置规则时，它会与默认规则竞争，但由于有较高的层叠顺序，所以我们设置的规则会覆盖掉默认规则。
层叠顺序基本原则是用选择文档总体样式，用特殊选择器一般选择器，从而设置样式。
下面介绍优先级从高到低排列的6种选择器分组；
1）添加了！important规则的最高优先级。他们会覆盖不带！important的规则。#demo{border：6px；！important}的优先级高于#demo{border：5px；}。
2）第二种优先级是style所嵌入的。然而style属性的代码难以维护，所以不介意使用这种方式。
3）第三优先级分组具有一个或者ID选择器的规则。例如#demo{color：red；}的优先级大于.demo{color:blue;}。
4）第四优先级是具有一个或多个类或者伪选择器的。例如.demo{color:red;}大于div{color:blue;}
5)第五优先级分组是具有一个或者选择器的规则。div{color：red；}大于*{color：blue；}
6）第六优先级分组是指那些值包含统配选择的，例如*{color：red；}

当然也会碰到处于同一优先级，但是数量不一样的情况。这种情况，我查阅资料，资料中显示：

1）竞争规则属于同一选择器分组，那么他们的优先级会进一步根据选择器的类型和数量进行比较。如果一个选择器比竞争选择器有更多的高优先级选择器，那么这个选器的优先级就更高。#demo .q li{color：red；}大于#demo li{color：blue；}
2）如果竞争规则属于相同的选择器分组，并具有相同数量和级别的选择器，那么回进一步按照位置进行优先级比较。属于高优先级的位置会覆盖低优先级的位置的规则。下面是优先级从高到低排列的6个位置；
1.优先级最高的位置是html文档的head标签中的style元素；例如，style规则会覆盖style中@import中导入的规则。
2.第二优先级是style中@import导入的规则。
3.第三优先级是link元素导入的样式表；
4.第四优先级是link元素中@import导入的规则；
5.第五优先级是最终用户附加的样式表；
6.最低优先级是浏览器提供的默认样式。