层叠--浏览器使用哪个样式

    给定一组样式表中的一组样式，浏览器以层叠的方式确定具体使用哪一个样式。

    首先，你要“扮演浏览器”。假设你的页面上有一个<h1>元素，你想知道这个元素的font-size属性。你会这么做：

第一步：收集所有样式表

    这一步你需要所有样式表，包括：Web页面作者写的样式表，读者增加的样式表，还有浏览器的默认样式。

第二步：找到所有匹配的声明

    特别地，我们要找到font-size属性，所以要查看所有可能选择<h1>元素的选择器的font-size声明。检查所有样式表，找出所有匹配<h1>而且有font-size属性的规则。

第三步：对所有匹配的规则排序

    既然得到了所有匹配的规则，现在按作者、读者和浏览器对这些规则排序。换句话说就是（页面作者）写的规则比读者写的规则更重要。相应地，读者的样式比浏览器的默认样式更重要。

第四步：按特定性对所有声明排序

    凭直觉你可能认为，如果一个规则能更准确地选择一个元素，那么这个规则就更为特定，例如，子孙选择器“blockquote h1”比“h1”选择器更特定，因为前者只选择<blockquote>中的<h1>。这里有一个小秘诀，你可以按照这个秘诀计算一个选择器的特定性，在之后会提到的。

第五步：对于冲突的规则，按照它们在各自样式表中出现的顺序进行排序

    现在只需要对冲突的规则排序，各个样式表中后出现的规则（更靠近下面）更重要。所以，如果在样式表中增加一个新规则，它会覆盖在它之前的所有规则。

文章摘抄自 Head First HTML与CSS。