CSS：page-break-before，总是，除了第一次？

Question

我正在尝试创建一个漂亮的打印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; }

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

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

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

任何想法，将不胜感激。

Answer 1

:first-child

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

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

Answer 2

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

以下适用于Chrome v56。 创建一个实现page-break-before:always规则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>

Answer 3

<style>
        .prettyprint {
            page-break-before: always;
            margin-top:0;
        }

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

CSS：page-break-before，总是，除了第一次？

问题描述

3 个解决方案

解决方案1
4 已采纳 2010-08-02 19:53:18

解决方案2
3 2017-02-18 00:08:30

解决方案3
1 2016-12-16 18:41:47

CSS：page-break-before，总是，除了第一次？

问题描述

3 个解决方案

解决方案1 4 已采纳 2010-08-02 19:53:18

解决方案2 3 2017-02-18 00:08:30

解决方案3 1 2016-12-16 18:41:47

解决方案1
4 已采纳 2010-08-02 19:53:18

解决方案2
3 2017-02-18 00:08:30

解决方案3
1 2016-12-16 18:41:47