五、附加说明
- 文内的样式优先级为1,0,0,0，所以始终高于外部定义。这里文内样式指形如<div style="color:red">blah</div>的样式，而外部定义指经由<link>或<style& amp; gt;卷标定义的规则。
- 有!important声明的规则高于一切。
- 如果!important声明冲突，则比较优先权。
- 如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
- 由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。
- 关于经由@import加载的外部样式，由于@import必须出现在所有其它规则定义之前(如不是，则浏览器应该忽略之)，所以按照后来居上原则，一般优先权冲突时是占下风的。
还需要说一下，IE是可以识别位置错误的@import的，但无论@import在什么地方，它都认为是位于所有其它规则定义之前的，这可能会引发一些误会。
优先权问题看起来简单，但背后还是有非常复杂的机制，在实际应用中需要多多留意。
六、练习
看完上面的文字后，来做几道非常简单的题目。（自己答完前，请不要先看各题给出的链接地址哦）
1. 如何让使用两个使用相同样式名的元素具有不同的效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>test</title>
<meta name="Author" content="doyoe(飘零雾雨), edzmaster@gmail.com" />
<style type="text/css">
.test {
width:200px;
border:1px solid #000;
font:12px/200% "宋体";
color:#f00;
background:#ddd;
}
p.test {
color:#fff;
background:#070;
}
</style>
</head>
<body>
<div class="test">测试测试测试</div>
<p class="test">测试测试测试</p>
</body>
</html>
固定效果：
固定代码：
<div class="test">传说中的测试</div>
<p class="test">传说中的测试</p>