Question

我正在生成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页，页脚中有一些数字和方框，我用红色标记。我只想删除红色框中的数据，但是对于页码部分，我不想删除它。

注意：我正在使用dompdf库

Answer 1

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

此选择器：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而不是页脚，因为伪元素是相对于其父级的，并且每个页脚都是其父级内部的唯一页脚。

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

1 个答案: