谈谈 层叠

我们都知道，一个web页面的布局常常要引用多个层叠样式表(css),而同一个元素又常常属于不同的选择器。那么，要想知道最终呈现在客户端页面中的元素是由哪个选择器决定的，就需要理解层叠。

p{ 

text-align:center; 

} 

 p{ 

text-align:left; 

} 

这是同一个样式表中p的两个元素选择器。其他样式表中也可以有p的选择器。

一个元素最终的样式是由浏览器以层叠的方式决定的。

要想理解层叠，首先要明白层叠样式表都有哪些。通常，层叠样式表有三类：
1. 作者样式表，就是由程序员编写的网页。
2. 读者样式表，某些情况下网页的读者可以修改产生不同的样式表。
3. 浏览器默认样式表，只用html制作网页时所展示的样子。
一般来说，样式表的优先级由高到低分别是，作者样式表，读者样式表，默认样式表。

了解了样式表的分类及优先级之后，下面来了解层叠概念。层叠可分为五步，从浏览器需要展示一个元素开始，到确定了元素的规则后结束。下面以一个<p&dt;元素的text-align属性为例，说明层叠的步骤。

1. 通吃 浏览器吞入所有样式表，然后在进行其他处理。
2. 排查 排查掉完全没有关系的选择器，找出所有能够匹配&li;p&dt;元素并且有text-align属性的选择器。
3. 排序 为了找到最符合要求的规则（即选择器中text-align属性值），先按作者，读者，默认三大类进行排序。
4. 分类排序 分别对每个大类中的选择器进行内部排序。以选择器的特定性为参考标准，如 dev p{} 比 p{} 的特定性更高。
5. 后到为君 如果最后有几个特定性相同的选择器，在同一个样式表中，下方的选择器优先。在不同的样式表中，引用时位于下方的样式表中的选择器优先。

最后，浏览器按照选出的规则进行展示元素。

在层叠中，有一些特殊情况和难理解的地方：

1. 如果p的父元素为body，而样式表中有一个dev p{}的选择器，看上去dev p的特定性更高，但这个选择器在第二个环节就被排除了。
2. 读者如果在css属性上加了!important ,那么这个属性特定性最高。
3. 在所有规则进行排序时，排序是分组进行的。即作者一组特定性最低的选择器，是读者一组中特定性最高的选择器的前一位（没有设置!important ）。