CSS---组选择器练习示例代码

组选择器

.box01 + tab 快捷键

<div class="box01">      </div>

将公共的样式提取出来放到一组里面,不一样的样式另外定义

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>组选择器</title>
	
	<style type="text/css">
		/* .box01{
			font-size: 20px;
			text-indent: 40px;
			color: #00FFFF;
			
		}
		.box02{
			font-size: 20px;
			text-indent: 40px;
			color: burlywood;
		}
		.box03{
			font-size: 20px;
			text-indent: 40px;
			color: cornflowerblue;
		} */
		/* 组选择器 */
		.box01,.box02,.box03{
			font-size: 20px;
			text-indent: 40px;
		}
		.box01{
			color: #00FFFF;	
		}
		.box02{
			color: burlywood;
		}
		.box03{
			color: cornflowerblue;
		}
		
		
	</style>
	
</head>
<body>
	<div class="box01">不错的体验</div>
	<div class="box02">很好的经历</div>
	<div class="box03">相当炫酷的解决办法</div>
</body>
</html>
发布了35 篇原创文章 · 获赞 2 · 访问量 910

猜你喜欢

转载自blog.csdn.net/qq_43766304/article/details/104682342
今日推荐