仅使用 CSS 删除最后一页的页脚答案

【问题标题】：Delete the footer only on the last page using CSS仅使用 CSS 删除最后一页的页脚
【发布时间】：2019-10-08 05:41:26
【问题描述】：

我正在生成 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 库

【问题讨论】：

.last 不是.page-number 的子级。事实上，他们甚至不是兄弟姐妹。你的选择器没有意义。也许您正在寻找footer:last-of-type .page-number, footer:last-of-type .last
我只是关注这个w3schools.com/cssref/tryit.asp?filename=trycss3_last-child
:last-child 定位在伪元素之前与给定选择器匹配的最后一个子元素。但是，您的选择器不会匹配任何内容。问题不是:last-child，而是它之前的选择器。
我正在使用这个footer:last-of-type .page-number, footer:last-of-type .last { display: none; }跟踪你的代码，我所有的页脚都消失了，使用这个footer:last-of-type .page-number {display: none}我所有的页码都消失了，使用这个footer:last-of-type .last { display: none; }我所有的红框没了
你的页脚不能是兄弟姐妹。伪是相对于直接父级的，因此您必须针对同级元素。我做了一个完整的答案以获得更多解释。

标签： html css pdf dompdf

【解决方案1】：

你的问题是你的选择器，它没有针对任何东西。

此选择器：footer .page-number .last:last-child 的目标是页脚元素中 className page-number 的元素的 className last 的最后一个子元素。

这看起来像这样：

<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

这针对页面上最后一个 <footer> 元素内所有 className page-number 或 last 的元素。

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

例如，在这种情况下：

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

你会想要匹配 div 而不是页脚，因为伪元素是相对于它们的父元素的，并且每个页脚是其父元素内的唯一页脚。

【讨论】：

我想让页脚动态化，所以我设置了页脚位置fixed。而且我不知道我有多少页，所以我只调用一次页脚。