给定一组样式表中的一组样式,浏览器以层叠的方式确定具体使用哪一个样式。
首先,你要“扮演浏览器”。假设你的页面上有一个<h1>元素,你想知道这个元素的font-size属性。你会这么做:
第一步:收集所有样式表
这一步你需要所有样式表,包括:Web页面作者写的样式表,读者增加的样式表,还有浏览器的默认样式。
第二步:找到所有匹配的声明
特别地,我们要找到font-size属性,所以要查看所有可能选择<h1>元素的选择器的font-size声明。检查所有样式表,找出所有匹配<h1>而且有font-size属性的规则。
第三步:对所有匹配的规则排序
既然得到了所有匹配的规则,现在按作者、读者和浏览器对这些规则排序。换句话说就是(页面作者)写的规则比读者写的规则更重要。相应地,读者的样式比浏览器的默认样式更重要。
第四步:按特定性对所有声明排序
凭直觉你可能认为,如果一个规则能更准确地选择一个元素,那么这个规则就更为特定,例如,子孙选择器“blockquote h1”比“h1”选择器更特定,因为前者只选择<blockquote>中的<h1>。这里有一个小秘诀,你可以按照这个秘诀计算一个选择器的特定性,在之后会提到的。
第五步:对于冲突的规则,按照它们在各自样式表中出现的顺序进行排序
现在只需要对冲突的规则排序,各个样式表中后出现的规则(更靠近下面)更重要。所以,如果在样式表中增加一个新规则,它会覆盖在它之前的所有规则。
文章摘抄自 Head First HTML与CSS。