每当插入分页符时获取特定的 CSS

Question

这是我的页面的概要

.section
{
  height: 50px;
  width:50px;
  border:1px solid black;
  /*border-bottom:5px solid gray;*/
  margin:10px;
 margin-bottom:200px;
 page-break-inside: avoid; 
}

<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>

我希望在这里实现的是，每当我们打印此页时，每页的第一个框和最后一个框应该有灰色边框。

如果有人遇到过这种情况，请帮忙。

目前，我正在搜索 JavaScript 触发器，它会在分页符时触发并帮助我访问页面上的第一个元素。但是，如果有人可以建议其他搜索方式，那也会有所帮助。

更新 1：此内容是动态生成的。盒子的大小可能会有所不同。所以我不能确定每个页面上会显示多少个框。

更新 2：我考虑过页眉和页脚。但这不会完全有帮助。因为我必须为第一个和最后一个 DIV 的内容添加某些样式。

Answer 1

.section
{
  height: 50px;
  width:50px;
  border:1px solid black;
  /*border-bottom:5px solid gray;*/
  margin:10px;
 margin-bottom:200px;
 page-break-inside: avoid; 
}
div.wrapper .section:first-child {border-bottom:5px solid gray;}
div.wrapper .section:last-child {border-bottom:5px solid gray;}

 
<div class="wrapper">
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
<div class='section'></div>
</div>

您可以使用简单的 CSS 来完成。将所有 div 包装在一个 DIV 中。现在使用 css :first-child 和 :last-child 您可以提供所需的属性。

Answer 2

当使用 html 标记中的空元素打印页面时，您可以插入自定义分页符。然后简单地给它之前和之后的元素一个特殊的 class 来定位。

@media all {
  .page-break {
    display: none;
  }
}

@media print {
  .page-break {
    display: block;
    page-break-before: always;
  }
  .section.before {
    border: 5px solid blue;
  }
  
  .section.after {
    border: 5px solid red;
  }
}

.section {
            height: 50px;
            width: 50px;
            border: 1px solid black;
            margin: 10px;
            margin-bottom: 200px;
            page-break-inside: avoid;
        }

<div class="wrapper">
  <div class='section'></div>
  <div class='section before'></div>
  <div class="page-break"></div>
  <div class='section after'></div>
  <div class='section'></div>
  <div class='section before'></div>
  <div class="page-break"></div>
  <div class='section after'></div>
  <div class='section'></div>
</div>

每当插入分页符时获取特定的 CSS

Get a specific CSS whenever a page break is insert

jquery

html

css

page-break

page-break-inside