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

Posted 2023-03-06

【中文标题】每个打印页面上的最后一个元素的样式不同

【英文标题】：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 使用。

【参考方案1】：

根据MDN @page，

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

【参考方案2】：

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

Fiddle

【讨论】：

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