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

Question

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

页眉显示 Logo ，并使用 CSS 显示页码。

我的站点允许用户添加文本 block 或图像拼贴，并使用“添加文本”和“添加图像”按钮独立添加它们。

结果代码(有点)如下:(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;”规则……因为我可能希望它们在一个页面上堆叠多个页面以节省纸张并且看起来不傻。

我的问题是，在每个可编辑部分中，我有一个 HTML header ，如果这是页面上的第一个可编辑部分，我只想显示它。

所以问题是，我怎样才能在每个打印页面上只显示第一个标题？我想这会产生以下效果:

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

但是，“您不能使用@page 更改所有 CSS 属性。您只能更改文档的边距、孤儿、寡妇和分页符。”

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

想法？

Answer 1

你知道这个 javascript 吗？

document.getElementsByTagName('h1')[0]

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

这有帮助吗？