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

Question

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

到目前为止，我尝试使用@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> 
 
    \t <div class="el"> element </div> 
 
    \t <div class="el"> element </div> 
 
    \t <div class="el"> element </div> 
 
    \t <div class="el"> element </div> 
 
    \t <div class="el"> element </div> 
 
    \t <div class="el"> element </div> 
 
    \t <div class="el"> element </div> 
 
    </div>

Answer 1

添加类的div容器，并使用last-child这一点。

Fiddle

Answer 2

按MDN @page，

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