使用CSS仅在最后一页上删除页脚

时间:2019-05-21 19:02:48

标签: html css pdf dompdf

我正在生成pdf。我想使用css方法删除最后一页,我正在尝试获取:last-child来删除它,但结果不算什么。

我的代码:

body {
  font-family: 'Roboto', sans-serif;
  font-size: 0.85em;
  padding-left: 30px;
  padding-right: 30px;
  line-height: 0.95em;
}

@font-face {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: normal;
}

footer {
  position: fixed;
  bottom: -30px;
  right: 0px;
  height: 50px;
  width: 270px;
  text-align: left;
}

footer .page-number:after {
  content: counter(page);
}

footer .page-number .last:last-child {
  display: none
}
<body>

  <footer>

    <div class="right" style="margin-left: -85px;">
      <span class="page-number"></span>
    </div>

    <table width="100%" class="last">
      <tr>
        <td>
          <span style="
    				border: 1px solid;
    				box-sizing: border-box;padding-right: 0.88cm;padding-left: 5px;vertical-align: middle;">Roles I &nbsp;</span>
          <span style="width: 300px;
    				border-top: 1px solid;
    				border-right: 1px solid;
    				border-bottom: 1px solid;
    				margin-left: -6px;
    				box-sizing: border-box;padding-right: 70px;vertical-align: middle;">&ensp;&ensp;&ensp;&ensp;&ensp;</span><br>

          <span style="
    				border-left: 1px solid;
    				border-right: 1px solid;
    				border-bottom: 1px solid;
    				box-sizing: border-box;padding-right: 1.32cm;padding-left: 5px;vertical-align: middle;">Roles II</span>
          <span style="width: 300px;
    				border-right: 1px solid;
    				border-bottom: 1px solid;
    				margin-left: -6px;
    				box-sizing: border-box;padding-right: 70px;vertical-align: middle; ">&ensp;&ensp;&ensp;&ensp;&ensp;</span>
        </td>
      </tr>
    </table>
  </footer>
  MY content here until N - Page and i want to remove the last footer
</body>

在此示例中可以看到,我有3页,页脚中有一些数字和方框,我用红色标记。我只想删除红色框中的数据,但是对于页码部分,我不想删除它。 enter image description here

注意:我正在使用dompdf库

1 个答案:

答案 0 :(得分:0)

您的问题是您的选择器,它没有针对任何目标。

此选择器:footer .page-number .last:last-child定位到页脚元素内具有className last的元素的最后一个具有className page-number的子元素。

这看起来像这样:

<footer>
    <div class="page-number">
        <div class="last"></div>
        <div class="last"></div> <!-- It would target this element -->
    </div>
</footer>

但是,您的结构如下所示:

<footer>
    <div class="right">
        <span class="page-number"></span>
    </div>
    <table class="last"></table>
<footer>

似乎您要在页面的最后一个页脚元素中同时定位 .page-number.last,这可以使用其他伪选择器来完成, :last-of-type

选择器如下所示:

footer:last-of-type .page-number,
footer:last-of-type .last

这将定位页面上最后一个page-number元素内具有className last<footer>的所有元素。

这当然假设您的页脚都是兄弟姐妹。如果不是,则必须将:last-of-type:last-child向上移动到树上,直到您位于兄弟姐妹的元素上。

例如,在这种情况下:

<div><footer></footer></div>
<div><footer></footer></div>
<div><footer></footer></div>

您希望匹配div而不是页脚,因为伪元素是相对于其父级的,并且每个页脚都是其父级内部的唯一页脚。