代码
<html>
<head>
<title>层叠特性</title>
<style type="text/css">
p{
color:green;
} .red{
color:red;
}
.purple{
color:purple;
} /*这里的顺序是关键*/
#line3{
color:blue;
}
</style>
</head>
<body>
<p >这是第1行文本</p> <!-- 绿色 -->
<p class="red">这是第2行文本</p> <!-- 红色 -->
<p id="line3" class="red">这是第3行文本</p> <!-- 蓝色/先执行class样式，再执行id样式 -->
<p style="color:orange;" id="line3">这是第4行文本</p> <!-- 橙色/先执行id样式，再执行style样式 -->
<p class="red purple">这是第5行文本</p> <!-- 紫色/代码中red放在前面，先执行。purple放在后面，后执行。后执行的样式为最终样式 -->
</body>
</html>
说明：第五行中，class中的red purple顺序不是关键。style中的red purple顺序才是关键。purple排在下面，所以最终颜色为紫色。
先执行p body等之类的，再执行class样式，再执行p.class之类的，再执行id，再执行style。同样的class，放在后面的为最终效果。