xiaoxuetu.html
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>CSS样式表优先级测试</title>
<meta charset=”UTF-8″ />
<style type=”text/css” media=”screen”>
div {
color: green
}
</style>
</head>
<body>
<div style=”color:red;”>内部样式表(绿色) VS 内联样式(红色)</div>
</body>
</html>
显示效果：
得出优先级结果：内联样式 > 内部样式表
从上面步骤<2>到<5>的对比中我们可以知道:内部样式的优先级是最大的，而内部样式表和外部样式表的优先级得看他们的引入和定义顺序，如果先用内部样式表定义了样式，然后再引入通过外部样式表定义的样式，你们外部样式表的样式将会覆盖内部样式表定义的样式，反之亦是一样。
当然，这个情况只是用id或者class选择的时候，也是一样的。如果对一个标签的样式定义既有class也有id选择器的时候，同时又包含了三种样式定义方式的，就得先看完下面的优先级测试了。
三、判断用id、class以及标签选择器定义样式的优先级
本次测试中，为了减少其他因素的影响，只采用内部样式表来定义样式，同时分别使用了ID选择器和Class选择器来选择使用样式的标签。
1>三种方式并存的时候
xiaoxuetu.html
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>CSS样式表优先级测试</title>
<meta charset=”UTF-8″ />
<style type=”text/css” media=”screen”>
fieldset {
width: 50%
}
div {
color: red;
}
#idtest {
color: green;
}
.classtest {
color: blue;
}
</style>
</head>
<body>
<fieldset>
<legend>单一显示效果</legend>
<div id=”idtest”>只使用ID(绿色)</div>
<div class=”classtest”>只使用Class(蓝色)</div>
</fieldset>
<p> </p>
<fieldset>
<legend>先引入ID定义的样式再引入Class定义的样式</legend>
<div id=”idtest” class=”classtest”>小学徒</div>
</fieldset>
<p> </p>
<fieldset>
<legend>先引入Class定义的样式再引入ID定义的样式</legend>
<div id=”idtest” class=”classtest”>小学徒</div>
