CSS 层叠排序

   CSS允许多次将同一条规则赋予同一个元素，可以把它们称为“竞争规则”。浏览器使用层叠排序来决定应用哪一条竞争规则。Eg: 浏览器会为每个元素指派默认规则。当为某个元素指派规则后，你的规则将会把浏览器默认的规则覆盖掉。

层叠排序根据规则中使用的选择符类型把规则分为6组。高优先级里的规则将覆盖掉低优先级里的规则。这6组是根据选择符的特异性而划分的。低优先级组里的选择符拥有的特异性要弱于高优先级组里选择符的特异性。

层叠排序背后的指导性原则是：普通的（general）选择符会设置文档的总体样式，更具体的选择符会覆盖掉普通的选择符，从而为其设置更特殊的样式。

当竞争规则位于同一个选择符群组并且拥有同样的等级和数量的选择符时，它们的优先级会按照所处的位置来排。位于高优先级位置里的规则会覆盖掉低优先级位置里的竞争规则。

下面按从高到低的顺序列出6个选择符群组：

     （1）. 使用！impotant规则的群组拥有最高的优先级。他们会覆盖掉所以非!important的规则。

    （2）. 优先级第二高的群组是指嵌入在style属性里的规则。但是，由于把规则直接嵌在style属性里会增加代码的维护难          度，所以我们不建议这么做。

    （3）. 优先级第三高的群则是指那些拥有一个或多个ID选择符的规则。

    （4）. 优先级第四高的群则是指那些拥有一个或者多个类、属性或伪类选择符的规则。

    （5）. 优先级第五高的群组是指含有一个或多个元素选择符的规则。

    （6）. 优先级最低的群组是只有通配选择符的规则。

PS: 当竞规则属于同一个选择符群组（eg: 两条规则都含有ID选择符）时，会按照选择负的种类、以及数量来对其进行优先级排序。当选择符含有的高优先级选择符多余它的竞争选择符时，他将获得更高的优先级。

下面是6个位置群组按从高到低的优先级顺序排序：

(1). HTML文档头部中的<style>元素拥有最高的优先级位置。

(2). 第二高优先级的位置为通过嵌在<style>元素里@import语句引入的样式表。

(3). 第三高优先级的位置通过<link>元素链接的样式表。

(4). 第四高优先级位置为由<link>链接的样式表通过@import语句引入的样式表。

(5). 第五高优先级位置是终端用户绑定的样式表。

(6). 优先级位置最低的是浏览器所提供的默认样式表。

PS: 当在相同的位置等级输入或绑定多个样式表的时候，它们的绑定顺序就决定了它们的优先级。后绑定的样式表会覆盖前面的样 式表。当竞争规则处于同一个选择符群组时，并且选择符的数量、等级和位置也相同时，那么代码中后面的规则将覆盖写在前面的规则。