■继 承 和 层 叠

CSS规则影响元素的显示形态，但是如果没有样式匹配或者存在多种样式规则同时匹配该元素时，元素显示的形态到底是遵循哪个规则呢？本节论述的内容涉及到样式的继承和层叠方面的知识。

●继 承

有些样式通过默认的样式设置而“继承”，也就是说,子元素继承父元素的样式规则，包括color、font和text-align等等。

例如：

p { color: red }

...

<p>Sample paragraph with <b>bold</b> text.</p>

<B>和</B>标记内的文字显示为红色，因为其父元素P标记有一个样式规则color:red，同时没有设置针对B标记的匹配样式，根据继承原则 <B>和</B>标记内的文字显示为红色。

同样,任何B标记的子元素将继承段落的样式显示为红色。例如：

<p>Sample paragraph with <b>bold and <i>bold italic</i></b> text.</p>

但是如果增加了：

b { color: green }

<B>和</B>标记内的文字将要变成绿色，<I>和</I>标记内的文字也将继承其父标记B的样式而显示为绿色

Some style properties permit a value of inherit, indicating that the value should be taken from the element's parent, even if the property is not inherited by default

●样式冲突

有时侯元素可能是与若干式样规则相配，此时就产生了样式规则之间的冲突。为了断定哪个规则被应用，CSS按一定的梯级优先分配规则，根据优先权决定执行哪个规则。

理解式样声明之间是否存在冲突是非常重要的，例如，下面的样式不存在样式冲突：

b { font-size: 12pt; } /* no conflicts */
p b { color: red; }

但是下列样式规则中，对于P标记中的B标记来说，font-size出现冲突：

b { font-size: 12pt; } /* conflict between font-size property */
p b { font-size: 14pt;
color: red; }

这两种规则根据优先顺序决定执行哪个规则。

CSS按下列规则判定优先权的归属：

• 如果没有施加继承或缺省样式，此时不存在优先权问题，样式按设定的规则显示。
• 依据来源(网页制作者还是最终用户)、层叠秩序、重要性（特指!important关键字）来判断执行。
• 依据特殊性(基于特性级别)判断执行。
• 定义的顺序，最后定义的规则优先执行。

●层 叠

样式表有三个来源：“用户代理”、“最终用户”、“网页设计者”。

每个用户代理都具有一个默认的样式表，也就是说总要有一个样式表应用到页面当中。即使浏览器没有使用任何一个自定义样式。大多数浏览器允许用户改变一些默认的样式，比如字体和颜色、在选项设置中设定。

用户样式表允许定义自己的样式表应用到页面当中，有些用户可能需要比浏览器默认样式或页面设计者的样式设定的字体要大，色彩对比性更强的颜色。

程序设计者样式表：参看式样定义或参考内部包含样式的资料

设计者样式表>用户样式>默认样式

●!important关键字

!imporant关键字能被用于一个样式说明中，其优先权高于设计者和用户的样式。也就是说，如果用户样式表指定了一个!important声明，它将跨越设计者设定的样式而作用于页面。

* in the user's style sheet */

p {
color: red;
font-size: 18pt !important;
}

/* in the author's style sheet */

p {
color: green;
font-size: 12pt;
}

段落正文显示为18点绿色文字，而设计者指定的字体大小是12，颜色为绿色，按一般规则，设计者优先权高于用户，但是这里用户样式规则中声明了字体大小为!important级别。所以优先权最高.

注解:如果设计者的样式中声明字体大小为!important用户的字体大小仍然具有优先权。

浏览器兼容性
CSS规范（CSS1）允许设计者设置!important声明优先权高于用户的!important声明。而CSS2中将这个规则翻转过来。用户的! important声明高于设计者的声明。因为有些浏览器依然使用CSS1标准,所以设计者应该避免使用!important声明。

Netscape 6.0使用CSS2标准,用户!important声明总是优先的。但是Netscape 6.1的一个bug会引起设计者声明反而超越用户的!important声明！！。

在同"源"(用户、设计者……)的样式表内部,!important关键字声明同样具有绝对的优先权。举例来说：下列第二个样式规则按常理来讲应该具有优先权（因为顺序靠后)

/* in the author's style sheet */

p {
color: green !important;
font-size: 12pt;
}

p {
color: red;
font-size: 18pt;
}

但是段落正文将显示为18点绿色字体。因为第一个规则的颜色标记为!important。

频道声明：本频道的文章除部分特别声明禁止转载的专稿外，可以自由转载.但请务必注明出出处和原始作者 文章版权归本频道与文章作者所有.对于被频道转载文章的个人和网站,我们表示深深的谢意。 原始作者:佚名 录入时间:2007-6-20 17:11:48 信息来源:不详 投稿信箱:itqoo@126.com