嵌套 div 结构中的整体最后一个孩子

Question

我有一个html文件的以下结构

text {
  p {
    margin-bottom: rem(22);
    &:last-child {
      margin-bottom: 0;
    }
  }
}

<div class="text">

  <div class="one">
    <p>bla</p>
    <p>bla</p>
  </div>
  <div class="two">
    <p>bla</p>
  </div>
  <div class="three">
    <p>bla</p>
  </div>

</div>

对于最后一个孩子，我只想得到 p 的最后一个孩子。在这种情况下，div class="three" 中的 <p>。

但是使用这段代码，我总是为相应 div 中的每个最后一个孩子（一、二、三、...等等）做底部边距。

那么有没有解决方案，只获取 div“文本”的最后一个孩子（<p>）？

我正在寻找一种解决方案，该解决方案将找到最后一个 p 并将边距底部仅添加到该 p

Answer 1

在这种特殊情况下，选择器必须是

.text > div:last-child > p:last-child { ... }

或在 SCSS 中

.text {
     p {
       margin-bottom: rem(22);
     }
     div:last-child {
        p:last-child {
          margin-bottom: 0;
        }
    }
 }

}