层叠（cascade）

Cascading Styling Sheet（层叠式样式表）

首先，是你（作者）为网页写的所有样式表。

第二，有些浏览器也允许用户给XHTML元素创建他们自己的样式。如果你的样式表没有定义这些样式，就由用户的样式表来代替。（注意读者在属性声明后加上“!important”就能覆盖你的样式）

第三，如果没给一个元素定义样式，浏览器自己有一系列默认样式可以用。如果没有作者或读者提供的样式表，就用这些样式。

当浏览器需要决定给一个元素应用哪种样式时，它就采用这些样式表。优先权最高的是作者的样式，然后是读者的样式，最后是浏览器的默认样式。层叠就是浏览器决定采用哪种样式的方法。

1、层叠中浏览器的工作过程

假设网页中有一个

元素，你要扮成“浏览器”，要确定它的font-size属性，有以下几步：

第一步：把所有的样式表集中起来（包括网页作者写的样式表，读者加进去的样式表，浏览器默认的样式表）。

第二步：找到所有匹配的声明。这个例子中要找的是font-size属性，所以看看所有的有选择

元素的选择符的font-size声明。检查所有样式表，找出所有匹配

并且有font-size属性的规则。

第三步：将所有匹配结果分类。所有匹配的规则都找出来后，把它们以作者、读者、浏览器的顺序排序。作者写的比读者写的重要，同样，读者的样式比浏览器的默认样式重要。（前边提过，读者可以在CSS属性中加“!important”，这样排序的时候要把它们放到最前面）

第四步：根据声明的具体程度排序。一条规则越能准确地选择一个元素，它就越具体。（一般凭直觉即可知，对于复杂情况下边有方法介绍如何处理）注意，只在作者、读者、浏览器各个范围内排序，不是重新排整个列表。

第五步：最后，将所有冲突规则按照它们在各种样式表中出现的顺序排序。列表中的冲突规则排序的依据是，在它们各自样式表中后出现的规则更重要一些。

通过以上步骤，顺序表中的第一条规则就是获胜者，就用它的font-size属性。

2、如何决定一个选择符的具体度

要计算具体度，先以一组三个数字开始，000.然后计算选择符中的各种东西——左起第一位：如果这个选择符有id，每个加1分；中间位：这个选择符有类或伪类，每个加一分；最后一位：如果这个选择符有元素名称，每个加一分。eg：h1.greentea 011;a:link 011;#elixirs h1 101;p img 002.

（1）一个具体度比另一个大事怎么看出来的？把它们当作真正的数字来读就行：100（一百）比010（十）大，010（十）比001（一）大，一次类推。

（2）像"h1,h2"这样的规则，应怎么计算具体度？把它想成是两条单独的规则：一条h1规则，具体度是001；一条h2规则，具体度也是001.

（3）一条规则在CSS文件中越靠后，优先权越高。但是XHTML中的多个样式表链接的优先权呢？不管在不在同一个CSS文件中，顺序总是从头到尾。就当是把CSS以被链接的顺序都一起插入到文件中。

（4）注意，上述5个步骤中，每次排序都是以之前的顺序为基础的。首先，以作者、读者、浏览器的顺序排序，接着，在这些分类中按具体度排序，最后，将具体度相同的所有元素，根据在样式表中出现的顺序重新排序。

（5）关于!important 读者可以在属性声明末尾加!important忽略一种样式。比如：h1{fat-size:200%!important;}这就会忽略掉所有同属性的作者样式。

3、如果你在层叠中的规则中没有找到匹配的属性，就要用继承。但不是所有的属性都能通过继承得到，比如边框属性。对于能继承的属性（比如color、font-family、line-height等），浏览器从父亲开始检查元素的祖先，给属性找个指，如果能找到，就是我们要的属性值。如果那个属性不能通过继承得到，或者在祖先规则中也找不到值，那么唯一的办法就是求助于浏览器样式表中的默认值，所有的浏览器对每个元素都有默认样式。