【css练习】红绿灯-CFANZ编程社区

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>红绿灯</title>
		<style>
		    .traffic-lights{
				background-color: silver;
				width: 350px;
				padding:20px;
				display: flex;
				justify-content: space-between;
			}
			.light{
				width: 100px;
				height: 100px;
				border: 1px solid black;
				border-radius: 50%;
			}
			/* 石佬：class=right red这里的意思是，这个标签属于两个类，既是light又是red。 */
			.red{
				background-color: red;
			}
			.yellow{
				background-color: gold;
			}
			.green{
				background-color: lightgreen;
			}
		</style>
	</head>
	<body>
		<figure class="traffic-lights">
			<div class="light red"></div>
			<div class="light yellow"></div>
			<div class="light green"></div>
		</figure>
	</body>
</html>

之前写不出是因为选择器不对。详见注释。