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

我想创建一个漂亮的打印html页面。我需要在顶层构造之间强制分页，因此我为每个构造的顶层元素添加了一个CSS类，并设置了page-break-before：始终在该类的CSS中。例如：CSS：page-break-before，总是，除了第一次？

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

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

我的问题是我得到一个空白页，在第一个顶级元素之前。这是非常有意义的，考虑以前的页面突破：总是应该做的。但我不想要它。

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

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

任何想法，将不胜感激。

来源

2010-08-02 Jeff Dege

:first-child

可能会奏效，但相当肯定有问题与IE6，请参阅：http://www.quirksmode.org/css/firstchild.html

编辑：不工作在IE6，并为IE文档类型的新版本必须用于为它工作。

来源

2010-08-02 19:53:18 Alex

+1我能想到的最好的办法。您可以使用jQuery为IE6添加功能。 – 2010-08-02 19:57:37

即使在当前版本中，IE也会打印一些图片[至少对我来说]，我对IE6不太在意：P – naugtur 2010-08-02 20:21:58

你是个傻子。 – Pat 2010-08-02 21:06:59

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

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

来源

2016-12-16 18:41:47 John

解释将是有益的 – happymacarts 2016-12-16 19:41:16

在查看分页符一个很好的说明：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-18 00:08:30

回答

相关问题