最後に印刷されたページの最後の要素が異なる

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を使用します。 MDN @page 1として

Fiddle

Answer 2

、

あなたは@pageを持つすべてのCSSプロパティを変更することはできません。 は、文書の余白、孤児、未亡人、ページ区切りのみを変更することができます。 他のCSSプロパティを変更しようとすると無視されます。