2.3  层叠

CSS属性的一个最基本的事实是它们是层叠的，这也是称它们为CSS的原因。但这意味着什么呢？层叠是一种用于解决浏览器支持的不同样式表之间存在的潜在冲突的方法，它按优先级顺序应用样式，其根据包括样式表的创建者、用于创建样式的方法及选择的属性的类型等。

2.3.1  样式表创建者

所有现代浏览器都支持3种主要类型的样式表。按优先级从高到低排列，分别是：

1. 文档作者创建的样式表

2. 用户创建的样式表

3. 浏览器创建的样式表

这3种样式表以相反的顺序处理。首先，将Web浏览器中的默认样式应用于文档。如果没有这些默认样式，那么不使用样式表的Web页面看上去会很糟糕。默认样式包括字体字型、字体大小和颜色、元素间距、表格边框和间距及所有其他用户想要的样式。

接着，如果用户创建了任何优先于标准样式的用户样式，则应用这些用户样式，取代可能与此冲突的任何浏览器的默认样式。

最后，应用当前文档的作者创建的任何样式，取代浏览器默认样式或用户创建的样式。

2.3.2  创建样式表的方法

可用3种不同的方式或方法创建样式表。按优先级从高到低排列，分别是：

1. 作为内联样式

2. 作为嵌入式样式表

3. 作为外部样式表

同样，这些样式表创建方法以与优先级相反的顺序处理。因此，首先应用所有外部样式表，将它们的样式应用于文档。

接着，应用任何嵌入式样式(位于<style>…</style>标记中)，任何与外部规则冲突的样式获得优先权并覆盖其他样式。

最后，作为内联样式直接应用于元素的任何样式(例如，<div style="…"…</div>>)获得最高的优先权，覆盖之前所有指派的所有属性。

2.3.3  样式表选择器

选择要样式化的元素也有3种不同的方法。按优先级从高到低排列，分别是：

1. 通过单独的ID引用

2. 在组中通过类引用

3. 通过元素标记引用(例如，<p>或<b>)

根据受规则影响的元素数目和类型处理选择器，这与前两种解决冲突的方法稍有不同。这是因为规则不必一次只应用于一种选择器，可以引用许多不同的选择器。因此，需要有一种方法确定可包含任意选择器组合的规则的优先级。具体做法是计算每个规则的特殊性(specificity)，将它们按最大作用范围到最小作用范围的顺序排列。

计算特殊性的方法是根据之前编号列表中的选择器类型创建一个由3部分构成的数字。这个复合数一开始为[0,0,0]。当处理规则时，引用ID的每个选择器将第1个数加1，因此复合数变成[1,0,0]。假定特定规则中有3个ID引用，那么复合数变成[3,0,0]。

然后，引用类的选择器的数目放在这个复合数的第二部分。假定有5个，那结果为[3,5,0]。

最后，计算引用元素标记的选择器数目，将这个数字放在复合数的最后一个部分。假定有两个，则最终的复合数变成[3,5,2]。这是比较规则的特殊性所必需的。

如果复合数中每个类型的数目为9或更少，可将其直接转换成十进制数，这里这个数是352。数字较低的规则的优先级较低，数字较高的规则的优先级较高。如果两个规则的值相等，则最近应用的规则胜出。