</fieldset>
</body>
</html>
显示效果：
得出优先级结果 id选择器 > class选择器 > 标签选择器
2>当只有两个class或者两个id的时候
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”>
#idtest {
color: green;
}
#idtest2 {
color: YellowGreen;
}
.classtest {
color: blue;
}
.classtest2 {
color: yellow;
}
</style>
</head>
<body>
<fieldset>
<legend>两个class的时候</legend>
<div class=”classtest2″ class=”classtest”>classtest2(黄色)先classtest(蓝色)后</div>
<div class=”classtest” class=”classtest2″>classtest(蓝色)先classtest2(黄色)后</div>
</fieldset>
<p> </p>
<fieldset>
<legend>两个id的时候</legend>
<div id=”idtest” id=”idtest2″>idtest(绿色)先idtest2(黄绿色)后</div>
<div id=”idtest2″ id=”idtest”>idtest2(黄绿色)先idtes(绿色)t后</div>
</fieldset>
</body>
</html>
显示效果：
得出优先级结果：当且仅当有两个或者是多个class或者id的时候，谁在前面就谁的优先级高。
3>只有标签div选择器的时候
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: blue;
}
div {
color: red;
}
</style>
</head>
<body>
<div>蓝色样式先，红色样式后</div>
</body>
</html>
显示效果：
xiaoxuetu2.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″ />
