如果你对同一文本应用了两个以上的样式,样式之间可能会发生冲突,产生不可预料的结果出来。浏览器对样式的应用是根据以下规则进行的:
![]() |
如果有两个样式应用于同一文本,浏览器会将所有样式的属性都显示出来,除非具体样式有冲突。比如说一个样式指定文本色为蓝色,而另一个样式指定文本色为红色。 |
![]() |
如果两个属性之间有冲突,浏览器会选择最靠近文本的样式属性来显示。 |
![]() |
如果是直接冲突,那么 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>