html - 如何删除一组元素中最后一个子项的底部边距？

Question

如何使用 .col-md-2 删除最后一个容器元素中 p 的 margin-bottom？

p {
  margin: 0;
}
.col-md-2 p {
  margin-bottom: 15px;
}

<div class="col-md-2-wrap">
  <div class="col-md-2">
    <p>lorum ipsumlorum ipsumlorum ipsumlorum ipsumlorum ipsumlorum ipsum</p>
    <p>lorum ipsumlorum ipsum</p>
  </div>
  <div class="col-md-2">
    <p>lorum ipsum lorum ipsum lorum ipsum lorum ipsum</p>
    <p>lorum ipsumlorum ipsumlorum ipsumlorum ipsum</p>
  </div>
</div>

我应该使用 nth-child 还是 last-of-type 选择器？我不知道如何根据我的情况使用它们。

Answer 1

就我个人而言，我只想添加另一条规则来指定“最后一个 col-md-2 的最后一个 p 应该有 0 个边距”，如下所示:

p {
  margin: 0;
}

.col-md-2 p {
  margin-bottom: 15px;
}

.col-md-2:last-of-type p:last-child {
  margin-bottom: 0px;
}

如果您出于某种原因不想这样做，您可以执行以下操作:

p {
  margin: 0;
}

.col-md-2:not(:last-of-type) p, .col-md-2:last-of-type p:not(:last-child) {
  margin-bottom: 15px;
}

这个有两部分:

1. .col-md-2:not(:last-of-type) p 将边距应用到所有 p，但出现的除外在最后一个 col-md-2

2. .col-md-2:last-of-type p:not(:last-child) 将其应用于所有 p最后一个 col-md-2 除了最后一个 p。