Question

实际上很简单：

如果我有几个孩子，我希望.child拥有margin-bottom: 10px; 如果只有一个孩子，我不想拥有那个边缘

显然：仅将另一个类添加到容器中不是一种选择。 仅CSS解决方案

<div class="container">
  <div class="child">xxx</div>
</div>

<div class="container">
  <div class="child">xxx</div>
  <div class="child">xxx</div>
</div>

<div class="container">
  <div class="child">xxx</div>
  <div class="child">xxx</div>
  <div class="child">xxx</div>
  <div class="child">xxx</div>
</div>

因此第一个容器的孩子应该没有没有利润。其他示例在每个孩子之间应留有空白

Answer 1

您可以在上一个元素之后为每个元素添加边距，因此如果前面有一个元素，我们只有margin-top。

.container {
 border:2px solid;
 margin:20px;
}
.child {
  height:20px;
  background:red;
}
.child + .child {
  margin-top:10px;
}

<div class="container">
  <div class="child">xxx</div>
</div>

<div class="container">
  <div class="child">xxx</div>
  <div class="child">xxx</div>
</div>

<div class="container">
  <div class="child">xxx</div>
  <div class="child">xxx</div>
  <div class="child">xxx</div>
  <div class="child">xxx</div>
</div>

或者从最后一个元素中删除margin-bottom，这样当只有一个元素时，它也将是最后一个元素：

.container {
 border:2px solid;
 margin:20px;
}
.child {
  height:20px;
  margin-bottom:10px;
  background:red;
}
.child:last-child {
  margin-bottom:0;
}
/* OR
.child:not(:last-child) {
  margin-bottom:10px;
}
*/

<div class="container">
  <div class="child">xxx</div>
</div>

<div class="container">
  <div class="child">xxx</div>
  <div class="child">xxx</div>
</div>

<div class="container">
  <div class="child">xxx</div>
  <div class="child">xxx</div>
  <div class="child">xxx</div>
  <div class="child">xxx</div>
</div>

Answer 2

您可以将 :first-of-type 伪类与 :not 否定伪类结合使用，并设置{{1 }}。这样只会将margin-top赋予具有前一个元素的子元素，从而提供您正在寻找的分离效果：

margin-top

.container {
  border: 1px solid black;
}

.child:not(:first-of-type) {
  margin-top: 10px;
}

CSS选择器：仅在有多个子代时选择子代

2 个答案: