0

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

到目前为止，我尝试使用@page {.el:last-child...}，但什么也没做。并且 usingel: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>

4

2 回答 2

1

根据MDN @page，

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

于 2017-10-04T13:35:43.593 回答
-1

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

小提琴

于 2017-10-04T13:35:35.963 回答