10

我正在尝试创建一个漂亮的 html 页面。我需要在顶级结构之间强制分页，所以我在每个结构的顶级元素中添加了一个 CSS 类，并在该类的 CSS 中设置 page-break-before:always。例如：

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

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

我的问题是我在第一个顶级元素之前得到一个空白页。考虑到 page-break-before:always 应该做什么，这是完全有道理的。但我不想要它。

因此，一个选项是不在第一个元素中包含“toplevel”类，或者提供一个不设置 page-break-before:always 的新“firsttoplevel”类，并将其设置为第一个顶级元素，然后对所有其他人使用“顶级”。我可以很容易地做到这一点，但它似乎违反了关注点分离。

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

任何想法，将不胜感激。

4

3 回答 3

6

在以下位置查看关于分页符的详细说明：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;
}
<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>

于 2017-02-18T00:08:30.923 回答
4 
:first-child

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

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

于 2010-08-02T19:53:18.353 回答
1 
<style>
        .prettyprint {
            page-break-before: always;
            margin-top:0;
        }

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

于 2016-12-16T18:41:47.190 回答