类和标记的CSS层次结构

这是一个非常基本的问题。我不明白为什么代码的第1版不做与我简单地将所有内容添加到.container类相同的事情

多谢各位

.container {
display: flex;
background-color: #FF5722;

}

.container div{
margin: 10px 10px;
padding: 10px;
}

/* why isn't this the same */
.container {
display: flex;
background-color: #FF5722;
margin: 10px 10px;
padding: 10px;
}

<div class="container">
<div class="box-1">...</div>
<div class="box-2">...</div>
<div class="box-3">...</div>
</div>

.container{
显示器：flex；
背景色：#FF5722；
}
.货柜组{
利润率：10px 10px；
填充：10px；
}
/*为什么不一样*/
.集装箱{
显示器：flex；
背景色：#FF5722；
利润率：10px 10px；
填充：10px；
}
...
...
...

在第一个版本中，您是在容器内的div中添加边距和填充，而不是容器本身。在第二个版本中，边距和填充将应用于容器。就这么简单。应用于父元素（在本例中为容器）的样式不会自动应用于其中的子元素，必须单独设置它们

---

当您声明

.container div{…}

时，您的目标是

容器内的每个
div
，而不是
容器本身
 我不能理解你的问题，你的问题是什么意思。container div和div.container是一回事？就像他们总是以容器内的div为目标一样？否。
。容器div
以容器内的每个
div
为目标。同时，
div.container
将类
container
位于任何
div
内的任何元素作为目标。但是，如果您删除空格并说
div.container
，那么现在您将使用类
container
以任何
div
为目标。