css案例学习之层叠样式

最新推荐文章于 2021-08-03 18:47:58 发布

weixin_34133829

最新推荐文章于 2021-08-03 18:47:58 发布

阅读量102

点赞数

代码

<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>