<!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>
之前写不出 是因为选择器不对。详见注释。
