我是CSS的新手，我遇到了一个编码问题，我必须创建一个三个框，一个在另一个里面。下面是我的代码。截至目前，它只创建了两个盒子。我应该在代码中进行哪些更改以包含第三个框。
#first {
width: 100px;
height: 100px;
background: red;
overflow: hidden;
}
#first #second {
position: relative;
width: 50%;
height: 50%;
margin: auto;
margin-top: 25%;
background: black;
}
#first #second #third {
position: relative;
width: 25%;
height: 25%;
margin: auto;
margin-top: 25%;
background: orange;
}<body>
<div id="first">
<div id="second"></div>
<div id="third"></div>
</div>
</body>#first {
width: 100px;
height: 100px;
background: red;
overflow: hidden;
}
#second {
position: relative;
width: 50px;
height: 50px;
margin: auto;
margin-top: 25px;
background: black;
overflow: hidden;
}
#third {
width: 12.5px;
height: 12.5px;
margin-top: 18.75px;
margin-left: 18.75px;
background: orange;
}<body>
<div id="first">
<div id="second">
<div id="third">
</div>
</div>
</div>
</body>您错过了将#thirddiv 放在div#second中。试试这个。
<body>
<div id="first">
<div id="second">
<div id="third"></div>
</div>
</div>
</body>
这不是css的问题，而是html的问题。
<div id="first">
<div id="second">
<div id="third"></div>
</div>
</div>
在上面的代码中。Third是Second的孩子，Second是First的孩子。