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

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

我不认为这可以控制。主要原因是没有＆＃34;最后一页＆＃34;因为根据您要打印的纸张，可能会有更多元素，这是在CSS应用于HTML元素后发生的，并且您的文档无法访问此信息。

但是，如果你自己知道自己将使用什么类型的纸张来打印它，让我们说A4，你可以设置父元素和子元素的高度，然后用简单的{{1伪选择器您将能够控制选择哪一个来应用样式。这是因为您知道A4的高度，因此您可以准确预测，假设没有人会在“打印预览”页面中添加任何不同的选项（即缩放等）。此外，您可以将此CSS放在:nth-child()内，因此它仅应用于打印页面。