关于不同样式的冲突问题

如果你对同一文本应用了两个以上的样式,样式之间可能会发生冲突,产生不可预料的结果出来。浏览器对样式的应用是根据以下规则进行的:

如果有两个样式应用于同一文本,浏览器会将所有样式的属性都显示出来,除非具体样式有冲突。比如说一个样式指定文本色为蓝色,而另一个样式指定文本色为红色。
如果两个属性之间有冲突,浏览器会选择最靠近文本的样式属性来显示。
如果是直接冲突,那么 CSS 样式属性(带有 CLASS 属性的样式)将覆盖 HTML 标签样式。

在下边的例子中,定义 H1 标签的样式可能会指定整个段落的字体,字体大小和字体颜色等,但是应用于该段落的自定义 CSS 样式 .Blue 将会覆盖掉你在 H1 样式中的颜色设置。第二个自定义 CSS 样式 .Red 又会覆盖掉 .Blue 样式的颜色设置,这是因为它更靠近被限定的文本。

<H1><SPAN CLASS="Blue">This paragraph is controlled by the .Blue custom style and H1
HTML tag style.<SPAN CLASS="Red">Except this sentence is controlled by the .Red style.</SPAN>
Now we're back to the .Blue style.</SPAN></H1>