选择页面上的最后一个元素（页面媒体）

Question

我想选择打印页面上的最后一个元素。 例如，给定此HTML（假设打印页面的高度为100px）：

<!-- other content before -->

<div id="TheThing">
  <section id="a">Some content</section>
  <section id="b">Some content</section>
  <section id="c">This will be the last section on the page</section>
  <section id="d">This section will start on the next page</section>
  <section id="e">This is the last section</section>
</div>

<!-- other content after -->

和这个CSS：

#TheThing {
  page-break-before: always;
  page-break-after: always;
}

section {
  height: 30px;
  border-bottom: solid 1px black;
  page-break-inside: avoid;
}

我希望能够选择每个打印页面上的最后一个元素 ，在这种情况下为#c （还有#e ，尽管如有必要，也可以使用:not(:last-child)轻松排除它）并删除其边框。

所需输出的近似值：

目前，我正在使用Prince XML。 我宁愿不要使用JavaScript。

可能吗？

Answer 1

Prince的创始人兼首席程序员在其论坛上表示，如果没有JavaScript并通过Prince运行两次文档，这是不可能的。 对不起:(

https://www.princexml.com/forum/topic/3672/how-to-select-the-last-tr-element-of-a-page-when-it-breaks

Answer 2

我认为这是无法控制的。 主要原因是没有“最后一页”之类的东西，因为根据要打印的纸张，可能会存在更多元素，并且这是在将CSS应用于HTML元素之后发生的，而您的文档没有访问此信息的方式。

但是，如果您100％知道自己将使用哪种类型的纸张进行打印（例如A4），则可以为父元素和子元素设置高度，然后使用简单的:nth-child()伪选择器进行设置将能够控制选择哪种样式来应用样式。 这是因为您知道A4的高度，因此可以准确地进行预测，假设没有A4的高度会在“打印预览”页面上添加任何其他选项（例如缩放等）。 另外，您可以将此CSS放在@media print ，因此它仅适用于打印的页面。