每个打印页面上的最后一个元素的样式不同答案

【问题标题】：Style last element on every printed page differently每个打印页面上的最后一个元素的样式不同
【发布时间】：2018-03-15 22:16:26
【问题描述】：

我有一个元素列表（任意长度）。但是，当用户打印它时，我想更改每个页面上最后一个元素的样式。

到目前为止，我尝试使用 @page {.el:last-child...} 但这没有任何作用。并且简单地使用el:last-child 只会将样式应用于最后一页上的最后一个孩子。

感谢任何帮助。

我有以下 HTML：

.el {
  width: 500px;
  height:250px;
  background:#ccc;
  margin:10px;
}
@page {
  .el:last-child {
    font-weight:bold;
  }
}
@media print {
  .el {display:block;}
}

    <div>
    	<div class="el"> element </div>
    	<div class="el"> element </div>
    	<div class="el"> element </div>
    	<div class="el"> element </div>
    	<div class="el"> element </div>
    	<div class="el"> element </div>
    	<div class="el"> element </div>
    </div>

【问题讨论】：

此 AFAIK 没有选择器。 “页面”是人工构造而不是 DOM 元素，因此不能被 CSS 使用。

标签： html css printing media-queries css-paged-media

【解决方案1】：

根据MDN @page，

您不能使用 @page 更改所有 CSS 属性。你只能改变文档的边距、孤儿、寡妇和分页符。更改任何其他 CSS 属性的尝试将被忽略。

【讨论】：

【解决方案2】：

将一个类添加到您的容器 div 并使用 last-child。

Fiddle

【讨论】：

这仅适用于我在帖子中提到的最后一页上的最后一个孩子