仅在存在特定子女的情况下，将样式应用于父母的最后一个子女

Question

我有一些看起来像这样的HTML：

<div class="parent">
    <div class="child"></div>
</div>
<div class="parent">
    <div class="child"></div>
</div>
<div class="parent">
    <div class="child"></div>
</div>

child可能会或可能不会在html中呈现，parent将始终呈现。我有这样的CSS：

  .parent {
    page-break-after: always;
  }

  .parent:last-child {
    page-break-after: avoid;
  }

这不太正确。我只想将page-break-after: always;应用于具有parent元素的最后一个父级的child和page-break-after: avoid;的{​​{1}}上。因此，例如，如果html呈现如下：

child

<div class="parent"> <div class="child"></div> </div> <div class="parent"> MISSING </div> <div class="parent"> <div class="child"></div> </div> 应该放在第一个page-break-after: always;和第三个parent上，而page-break-after: avoid应该放在最后的parent上。

如果是这样的话：

<div class="parent">
    <div class="child"></div>
</div>
<div class="parent">
    <div class="child"></div>
</div>
<div class="parent">
    MISSING
</div>

page-break-after: always;应该放在第一个parent和第二个page-break-after: avoid上，而parent应该放在第二个{{1}}上。

是否可以使用CSS选择器来做到这一点？在MS Edge和IE 11浏览器中正确运行很重要。如果这很重要，我正在使用Angular 6。