CSS:page-break-before,总是,除了第一次？

Question

CSS:page-break-before,总是,除了第一次？

我正在尝试创建一个漂亮的打印html页面.我需要在顶级构造之间强制分页,所以我在每个构造的顶级元素中添加了一个CSS类,并设置了page-break-before:总是在该类的CSS中.例如:

<body>
<div class="prettyprint">
    <div class='toplevel'>
        ...
    </div>
    <div class='toplevel'>
        ...
    </div>
</div>
</body>

.prettyprint .toplevel { page-break-before:always; }

Run Code Online (Sandbox Code Playgroud)

我的问题是我在第一个顶级元素之前得到一个空白页面.考虑到以前的分页符号,这是完全合理的:总是应该这样做.但我不想要它.

因此,一个选项是不在第一个元素中包含"toplevel"类,或者提供一个新的"firsttoplevel"类,该类不设置page-break-before:always,并将其设置为第一个顶级元素,然后对所有其他人使用"顶层".我可以轻松地完成它,但似乎它违反了关注点的分离.

所以我想知道在CSS中是否有办法做到这一点？设置一个仅适用于"prettyprint"的第一个"顶级"子项的规则？

任何想法,将不胜感激.

Answer 1

Aar*_*don 8

有关分页符的详细说明，请访问： https: //css-tricks.com/almanac/properties/p/page-break/

以下内容在 Chrome v56 上运行良好。创建一个规则，该规则实现page-break-before:always但在应用于第一个类型时抑制该规则。

.print-per-page {
  page-break-before: always;
}

.print-per-page:first-of-type {
  page-break-before: avoid;
}

Run Code Online (Sandbox Code Playgroud)

<div>
  <div class="print-per-page">Page 1</div>
  <div class="print-per-page">Page 2</div>
  <div class="print-per-page">Page 3</div>
</div>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Ale*_*lex 4

:first-child

Run Code Online (Sandbox Code Playgroud)

可能有效，但可以肯定 IE6 存在问题，请参阅：http ://www.quirksmode.org/css/firstchild.html

编辑：在 IE6 中不起作用，对于较新版本的 IE，必须使用 doctype 才能工作。

归档时间：	15 年，7 月前
查看次数：	4130 次
最近记录：	9 年前