div {
color: green
}
</style>
<link rel=”stylesheet” href=”css/xiaoxuetu.css” type=”text/css” media=”screen” title=”no title” charset=”utf-8″/>
</head>
<body>
<div>外部样式表(蓝色) VS 内部样式表(绿色)</div>
</body>
</html>
显示效果：
得出优先级结果：外部样式表 > 内部样式表
3>外部样式表 VS 内部样式表（先引入外部样式表定义文件，再定义内部样式表）这步很简单，其实就是直接将link标签剪切移动到上面到head标签中定义内部样式表的前面：
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″ />
<link rel=”stylesheet” href=”css/xiaoxuetu.css” type=”text/css” media=”screen” title=”no title” charset=”utf-8″/>
<style type=”text/css” media=”screen”>
div {
color: green;
}
</style>
</head>
<body>
<div>外部样式表(蓝色) VS 内部样式表(绿色)</div>
</body>
</html>
显示效果：
得出优先级结果：内部样式表 > 外部样式表
从<2>和<3>这两部测试我们可以知道，在直接对标签的样式进行定义时，外部样式表和内部样式表的优先与他们的引入顺序有关,嘿嘿，是不是很庆幸没有完全相信官网所说的咧……
4>外部样式表 VS 内联样式 直接在div标签中定义样式，这个时候我们修改下xiaoxuetu.html的代码：
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″ />
<link rel=”stylesheet” href=”css/xiaoxuetu.css” type=”text/css” media=”screen” title=”no title” charset=”utf-8″/>
</head>
<body>
<div style=”color:red;”>外部样式表(蓝色) VS 内联样式(红色)</div>
</body>
</html>
显示效果：
得出优先级结果：内联样式 > 外部样式表
5>内联样式 VS 内部样式表，这个时候我们修改下xiaoxuetu.html代码：
