当CSS样式中的定义标签与定义的DIV区域中的标签有重复时，定义DIV区域的标签具有优先级别。而没有与DIV区域定义重复的标签，可以直接应用到DIV区域中。如下面的例子：
下面是一个名为bl.css样式表文件中所含的CSS规则：
body { font-size: 12px; text-align: justify; }
p { font-size: 12px; text-align: justify; }
h1 { font-size: 24px; font-weight: bold; text-align: center; background-color: #CCCCCC; }
h2 { font-size: 18px; font-weight: bold; text-align: center; }
h3 { font-size: 16px; font-weight: bold; text-align: center; }
h4 { font-size: 14px; font-weight: bold; text-align: center; }
a:link { font-size: 12px; color: #0000FF; text-decoration: none; }
a:visited { color: #FF0000; font-size: 12px; text-decoration: none; }
a:hover { color: #FFFF00; font-size: 12px; text-decoration: none; }
a:active { font-size: 12px; color: #00FF00; text-decoration: none; }
#header h2 { font-size: 16px; line-height: 20px; font-weight: bold; color: #0000FF; text-align: center; }
#header h4 { font-size: 13px; line-height: 16px; font-weight: bold; color: #0000FF; text-align: center; }
在这个文件中我们定义了，页面属性、标题1到标题4，链接规则，并且定义了ID为header的DIV区域中的标题2和标题4的规则等。
下面是一个页面：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="../CSS/bl.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<h2>标题2，应用DIV的定义</h2>
<h4 align="center">标题4应用DIV的定义</h4>
<p>使用CSS样式中标签P段落的定义。</p>
</div>
<div id="p" align="center">
<p>使用CSS样式中标签P段落的定义。</p>
</div>
<div id="p1" align="center">
<p>使用CSS样式中标签P段落的定义</p>
</div>
</body>
</html>
得到如图所示：
'
可以看出最先有定义h2的一些属性没有引用上来(h2 { font-size: 18px; font-weight: bold; text-align: center; }而
#header h4 { font-size: 13px; line-height: 16px; font-weight: bold; color: #0000FF; text-align: center; }字体尺寸和色彩
)，是由于我们也有定下#header里的h2属性，基于div比css更具有优先的级别，所以标签发生冲突时，会选择引用DIV的属性.
如果h2不在#header里出现，而在其它DIV里面出来的话，他就会遵守最先定义的h2 { font-size: 18px; font-weight: bold; text-align: center; },这样我们就可以把具有公共属性的标签，单独在在CSS样式中定义，这些标签可以被所有DIV区域使用。只有当目标DIV中的标签属性需要区别与页面标签时，才单独定义。
posted on 2007-09-27 13:26
sanni 阅读(133)
评论(0) 编辑 收藏 引用