应用样式的优先级

3种调用样式表的方法在作用于页面元素时，优先级是不同的。在元素中直接使用的CSS具有最先的优先级，其次是从页面头部调用的CSS，最后是采用链接形式调用的CSS。下面用一个简单的示例来说明3种不同调用方式的优先级。XHTML页面中的主要代码如下所示。

<link ret="stylesheet" type="text/css" href="main.css"/> <!--定义表格的表现-->
<style type="text/css">
.content{
font-size:18px;
color:#ffffff;
background-color:#666666;}
</style>

<p class="content contentlink" style="background:#000000;"> <!--页面中直接使用的样式-->
这是一个关于三种调用样式表方式的优先级问题的一个简单示例。
</p>

被调用页面main.css中的代码如下所示：
.contentlink{
font-size:12px;
color:#000000;
font-weight:bold;
background-color:#ffffff;}

说明：在直接使用的CSS中，定义了元素p的背景色为#000000（也就是黑色）。在头部调用的CSS中，定义了元素p的背景色为#666666（也就是灰色），字体颜色为#ffffff（也就是白色）。字体大小为18px。在链接形式调用的CSS中，定义了元素P的背景色为白色，字体颜色为黑色，字体大小为12px，同时定义了字体的样式为加粗。

1.类型选择符与类选择符
但类型选择符与类选择符同时使用时，类选择符的优先级要高于类型选择符。下面一个同时使用类型选择符和类选择符的示例。

p{ /类型选择符中的样式(/em>/
font-size:12px;
font-weight:bold;
color:#ffffff;
background-color:#000000;}
.content{ /类选择符中的样式(/em>/
font-size:18px;
color:#000000;
background-color:#ffffff;}

<p class="content">
这是一个类型选择符与类选择符同时作用于内容的例子
</p>

说明：在类型选择符p定义的样式中，设置了字体大小为12px，字体样式为加粗，背景颜色为#000000（黑色）字体颜色为#ffffff（白色）。在类选择符.centent定义的样式中，设置了字体大小为18px，背景颜色为白色，字体颜色为黑色。

很明显，类选择符.centent定义的样式覆盖了类型选择符p定义的样式。在ID选择符.content定义的样式中，没有显示声明的font-weight属性，而是以继承的方式使用了类型选择符p中的样式。也就是说，要使一个元素及其子元素使用相同的样式，可以在元素的类型选择符汇中定义。如果其中的某个子元素有其特殊的表现效果，就必须定义性的样式来覆盖继承的样式。

2.ID选择符
ID选择符的优先级比类选择符更高。下面是在元素中同时使用ID选择符和类选择符时的示例，其代码如下所示。
#content{
font-size:18px;
color:#ffffff;
background-color:#000000;}
.content{
font-size:12px;
color:#000000;
font-weight:bold;
background-color:#ffffff;}

<p class="content" id="content">
这是一个使用ID选择符与类选择符同时作用于内容的例子
</p>

说明：在ID选择符content中，定义了文本颜色为白色，背景颜色为黑色，字体大小为18px。在类选择符.content中，定义了文本颜色为黑色，背景颜色为白色，字体大小为12px，同时定义了文本的样式为加粗。

从结果可以看出，ID选择符的优先级要高于类选择符。但是，类选择符中定义的font-weight属性任然能作用到文字上。这就说明默认值的优先级是最低的，只要对某个属性声明了一个值，就会覆盖原来的默认值。即使ID选择符的优先级要高于类选择符，也不能保留默认值。

3.最近最优先原则
最近最优先原则是决定元素使用哪些属性的关键。例如，在上一个例子中，作用于同一个元素的ID选择符和类选择符，元素会使用优先级比较高的ID选择符。如果ID选择符出现在父元素中，元素会使用最近定义的样式。

下面是父元素中使用ID选择符的示例。

#content{
font-size:12px;
color:#ffffff;
font-weight:bold;
background-color:#000000;}
.content{
font-size:18px;
color:#000000;
background-color:#ffffff;}
<div id="content">
<p class="content">
这是一个使用ID选择符与类选择符同时作用于内容的例子</p></div>

说明：在ID选择符content中定义了文本颜色为白色，背景颜色为黑色，字体大小为12px，字体的样式为加粗。在类选择符.content中定义了文本颜色为黑色，背景颜色为白色，字体大小为18px。

从结果可以看出，虽然ID选择符的优先级高于类选择符，但是内容使用的却是类选择符中的样式。这就是说明了最近定义的样式是最优先的。