页面HTML如下:
<span style=”font-size: 26px;”>
<span style=”color: rgb(0, 0, 255);”>
contents
</span>
</span>
不幸的是,上述html代码所在的页面引入了一个外部css文件,其中对span做了如下样式定义(这种一刀切的方式很不好)
span {
font-size:12px;
font-weight:bold;
}
这就造成了html代码无法正确反映在页面上。
因为第一个span的样式(<span style=”font-size: 26px;”>)虽然不受外部css文件中样式定义的影响,(因为如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。)
但第二个span的样式(<span style=”color: rgb(0, 0, 255);”>)会继承外部css文件中样式定义,从而使contents的最终字体大小定义为12px而并非我们所希望的26px。