每個打印頁面上最後一個元素的樣式不同

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屬性將被忽略。