多个样式表的样式都层叠在一个页面上,对各个元素会应用最特定的样式。有时候你就很糊涂,问这么多样式,在页面上这个元素到底是显示哪种效果呢?
假如你的页面上有一个<h1>元素,你想知道这个元素的font-size属性,你怎么办?
步骤:
一、收集所有的样式表
二、找到所有的匹配声明
三、现在对所有匹配的规则排序
四、现在按照特定性对所有的声明排序
五、对于冲突的规则,按照他们在各自样式中表现的顺序进行排序
这样得到的有序列表的第一个规则就是胜出者。
那么要是我经过了所有的步骤之后还是找不到包含特定属性声明的规则,来得到我想要确定的属性值,那怎么办呢?
如果在层叠的所有规则中都找不到匹配的属性就要使用继承了。不过不是所有属性都能继承,对于能继承的属性,浏览器会查看这个元素的祖先,从他的父元素开始,尝试找到这个属性的值,如果找到了,这个就是你要的属性值。
如果还没有找到,那就使用浏览器样式表中默认的值了,所有浏览器都对每个元素设置了默认值。
第四步怎么计算特定性?