css嵌套带来的一个问题

页面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。