div+css视频教程之Css优先级

当前位置:

首页 > 网站开发 > css >

div+css视频教程之Css优先级

Css优先级

屏幕就是一个战场，在一个HTML文件中，如果有3种不同的css样式表规则都使用P作为其选择。输入的样式表指示浏览器将 文字用红色显示，而植入的样式表指示浏览器用蓝色显示，而行内样式表指示浏览器用黄色。那么可怜的浏览器该听谁的呢？好在支持样式表的浏览器自身配有样式表的串接顺序来应付这种情形。总有几种样式表规则要比其它的规则更重要。根据正式的规定，以下为样式表的串接顺序：
Inline styles （行内样式）
Embedded styles （植入样式）
Linked styles （链接样式）
Imported styles （输入样式）
Default browser styles（缺省浏览器样式）
浏览器将按照上述顺序执行样式表的指令。但是还要一个问题。如果同一种类的多个规则相互冲突怎么办？比如，如果一项植入样式表规则将以绿色显示，而另一个规则要求以红色显示？多亏聪明的样式表标准的发明人，对于这种冲突也有一个顺序，但很复杂。这里有一个极其简单的解决顺序：

1.使用特别说明的样式表规则，例：
BODY { color: green } P { color: red }

有一项规则特别说明 中的文字一红色显示，但它同时也继承了 <BODY>的绿色规定。但是特别说明了的规则的重要性要大于继承的规则，所以之内的文字一红色显示。

2.应用继承的样式表规则
如果不存在第1步中所列的特别说明的规则（比如存在特别说明了的多项规则），则浏览器转向执行继承的规则。如果找不到继承的规则，则浏览器转向执行第3步。

3.按照样式表规则在HTML中的显示顺序执行。
P { color: green } P { color: red }

当无法适用上述规则时，浏览器将根据规则在代码中显示顺序执行。在上例中，作为讲座一红色显示，因为它是最后给出的规则。

注意：正式的串接样式表规定对于串接顺序有更详细的规定。但由于执行规定Netscape Communicator 和Internet Explorer都不支持，所以本文中不再细述。最后一个问题：如果样式表规则同HTML 标签冲突时，如何处理？我们看一下这个例子：

I { font-family: impact }

I think East of Eden is Stein beck's best novel.

该例中样式表规则要求浏览器使用 Impact，但是传统的HTML标签要求用Times字体，一个很明显的传统。根据正式的样式表规定，应该优先执行样式表规则。但是最主要的几种浏览器Netscape 和IE 4.0 都规定应优先执行HTML。唉....... 你看到了吧，浏览器不能如我们希望的那样应用串接样式表。节哀顺变吧。

栏目列表