Question

如何使用margin-bottom删除最后一个容器元素中p的{{1}}？

＆＃13;

.col-md-2

＆＃13;

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

＆＃13;

我应该使用<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选择器？我无法弄清楚如何使用我的情况。

Answer 1

就个人而言，我只想添加另一条规则来指定＆＃34;最后p的最后一个col-md-2应该有0个边距＆＃34;像这样：

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;
}

这个有两个部分：

.col-md-2:not(:last-of-type) p将保证金应用于所有p，但上一个col-md-2
.col-md-2:last-of-type p:not(:last-child)将其应用于上一个p的所有col-md-2，但最后一个p除外。

Answer 2

您可以使用last-child选择器的两倍，试试这个：

.col-md-2-wrap div:last-child p:last-child {
  margin:0;
}

.col-md-2-wrap ...定位包装器。
div：last-child ...定位最后一个.col-md-2内部包装
p：last-child ...定位上一个p内的最后.col-md-2

＆＃13;

.col-md-2-wrap {
  background: purple;
  color: white;
}
p {
  margin: 0;
}
.col-md-2 p {
  margin-bottom: 15px;
}
.next {
  background: gold;
  height: 50px;
}
.col-md-2-wrap div:last-child p:last-child {
  margin: 0;
}

＆＃13;

<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>
<div class="next"></div>

＆＃13;

Answer 3

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

如何在一组元素的最后一个中删除子项的margin-bottom？

3 个答案: