CSS层叠排序

在层叠排序背后的指导性原则是：普通（general）选择符会设置文档的总体样式，更具体的（more specific）选择符则会覆盖掉普通的选择符，以为器提供更加特殊的样式。

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

1、使用important规则群组拥有最高优先级。它们会覆盖掉所有非!important规则。例如，#i100{border: 6px solid black !important;}的优先级要高于#i100{border: 6px solid black }

2、优先级第二高的群组是嵌在style属性里的规则。因为使用style属性会增加代码维护的难度，所以不建议使用它。

3、优先级第三高的群组是值那些拥有一个或多个ID选择符的规则

4、优先级第四高的群组是指含有一个或多个类、属性或为类选择符的规则。

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

6、优先级最低的群组是只有通配选择符的规则--例如，*{}

当竞争规则位于同一选择符群组并且拥有同样等级和数量的选择符是，它们的优先级会按所处的位置来排。再次强调，只有当竞争规则位于同一选择符群组并且拥有同样等级和数量的选择符时，才应用这条规则。

1、最高优先级位置为HTML文档头部中的<style>元素。比如，<style>里的规则会覆盖掉通过嵌在<style>里的@import语句引入的样式表里的竞争规则。

2、第二高优先级的位置

为通过嵌在<style>元素里的@import语句引入的样式表。

3、第三高优先级的位置为<link>元素链接的样式表。

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

5、第五高优先级的位置为终端用户绑定的样式表。

当在终端用户的样式表中使用!important规则会有一个例外，此时这些规则会拥有最高优先级。这便允许了终端用户创建的规则能够覆盖开发者样式表中的规则。

6、最低优先级的位置为浏览器所提供的默认样式表。

挡在相同的位置等级输入或绑定多个样式表的时候，他们呢的绑定顺序就决定了它们的优先级。

当竞争规则处于同一选择符群组，并且选择符的数量、等级和位置也相同的时候，那么代码中后面的规则将覆盖写在前面的规则。

简化层叠：

让规则按照层叠的顺序来组织将非常容易知道具体应用了哪条竞争规则：

/*通配选择符*/

/*元素选择符*/

/*类、属性和伪类选择符*/

/*ID选择符*/

/*!important通配选择符*/

/*!important元素选择符*/

/*!important类、属性和伪类选择符*/

/*!important ID选择符*/