将两个或更多 CSS 规则应用于同一文本时,这些规则可能会发生冲突并产生意外的结果。浏览器按以下方式应用 CSS 规则:
在下面的示例中,为 h1 定义的样式可以指定所有 h1 段落的字体、大小和颜色,但应用于该段落的自定义 CSS 规则 .Blue 将覆盖 h1 样式中的颜色设置。另一个自定义 CSS 规则 .Red 将覆盖 .Blue,因为它位于 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>