CSS class 和标签的层次结构

Question

这是一个非常基本的问题。我不明白为什么代码的版本 1 与我将所有内容简单地添加到 .container class 时的效果不一样。

非常感谢！

.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>

Answer 1

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

当您声明 .container div { ... } 时，您针对的是 container 中的每个 div，而不是 container 本身。

CSS class 和标签的层次结构

CSS hierarchy for class and tag

css

overriding