Question

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

到目前为止，我尝试使用@page {.el:last-child...}，但这没有做任何事情。并且简单地使用el:last-child仅将样式应用于最后一页上的最后一个孩子。

感谢任何帮助。

我有以下HTML：

＆＃13;

.el {
  width: 500px;
  height:250px;
  background:#ccc;
  margin:10px;
}
@page {
  .el:last-child {
    font-weight:bold;
  }
}
@media print {
  .el {display:block;}
}

＆＃13;

    <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>

＆＃13;

Answer 1

根据MDN @page，

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

Answer 2

在容器div中添加一个类，然后使用<div id='container'> <div id='non-footer'> <h1>Sticky footer pattern</h1> <p> <a href='https://stackoverflow.com/q/46552641/274677'>SO question</a> </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero ex, tempus quis dolor at, consectetur lobortis leo. Etiam faucibus velit non turpis euismod lacinia. Vestibulum lobortis neque sed mi vestibulum, sit amet venenatis nulla auctor. Aenean porttitor sed purus id ornare. Mauris sed fermentum sem, id dapibus dolor. Nullam ullamcorper ut sem in consectetur. Quisque accumsan mauris vitae mi faucibus, sed blandit libero scelerisque. Donec vitae luctus metus, non fermentum elit. Duis purus ante, tempor vestibulum facilisis id, iaculis sed eros. Maecenas condimentum tortor suscipit aliquam feugiat. Sed sed enim egestas, venenatis ex at, pharetra nibh. Nullam faucibus tincidunt erat in mollis. Nulla a nunc lacus. Proin in pellentesque lorem. </p> </div> <div id='footer'> </div> </div>。

Fiddle

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

2 个答案: