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

Question

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

到目前为止，我尝试使用 @page {.el:last-child...} 但它什么也没做。并且简单地使用 el:last-child 只会将样式应用于最后一页的最后一个 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>

Answer 1

根据 MDN @page ,

You can't change all CSS properties with @page. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.