主页 > 知识库 > 网页基础 > Dreamweaver >

玩转Dreamweaver8.0:关于冲突的CSS规则

来源: 作者: 发表于:2012-08-17 14:05  点击:
将两个或更多 CSS 规则应用于同一文本时,这些规则可能会发生冲突并产生意外的结果。浏览器按以下方式应用 CSS 规则: 假如将两种规则应用于同一文本,浏览器显示这两种规则的所有属性,除非特定的属性发生冲突。例如,一种规则可能指定文本颜色为蓝色,而另

将两个或更多 CSS 规则应用于同一文本时,这些规则可能会发生冲突并产生意外的结果。浏览器按以下方式应用 CSS 规则:

  • 假如将两种规则应用于同一文本,浏览器显示这两种规则的所有属性,除非特定的属性发生冲突。例如,一种规则可能指定文本颜色为蓝色,而另一种规则可能指定文本颜色为红色。
  • 假如应用于同一文本的两种规则的属性发生冲突,则浏览器显示最里面的规则(离文本本身最近的规则)的属性。因此,假如外部样式表和内联样式同时影响文本元素,则应用内联样式。
  • 假如有直接冲突,则自定义 CSS 规则(使用 class 属性应用的规则)中的属性将覆盖 HTML 标签样式中的属性。

在下面的示例中,为 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>


    有帮助
    (0)
    0%
    没帮助
    (2)
    100%