如何使用 CSS 计算打印页面上的 HTML 个元素？

Question

我正在尝试在动态生成的 HTML 打印页面上重复打印 header。

header显示标志，CSS显示页码。

我的网站允许用户添加文本块或图像拼贴，并使用 "add text" 和 "add image" 按钮独立添加它们。

结果代码（有点）如下：（slim/HAML 语法）

editable-section.ng-cloak(
      ng-repeat='section in story.sections'
      editable='false'
    ) 
      = render 'header'
      .show-content-wrapper
        = render 'sections/section'

此内容的大小可能变化很大，因此我不想在每个内容之前放置一个“page-break-before:always;”规则...因为我可能希望它们堆叠多个在页面上以节省纸张而不是看起来很傻。

我的问题是，在每个 editable-section 中，我有一个 HTML header 我只想在这是页面上的第一个 editable-section 时显示。

所以问题是，我如何在每个打印页面上只显示第一个 header？我想这会产生以下效果：

@media only print {
  @page {
    header {
      display:none;
      &:first-of-type {
        display:block;
      }
    }
  }
}

然而，"You can't change all CSS properties with @page. You can only change the margins, orphans, widows, and page breaks of the document."

https://developer.mozilla.org/en-US/docs/Web/CSS/@page

想法？

Answer 1

你知道这个吗javascript？

document.getElementsByTagName('h1')[0]

使用方括号，您可以 select 一个特定元素，第 0 个元素是第一个元素。

这有帮助吗？

如何使用 CSS 计算打印页面上的 HTML 个元素？

How can I count HTML elements on a printed page using CSS?

css

printing

count

elements