Удалить нижний колонтитул только на последней странице, используя CSS - PullRequest
Новая
       22

Удалить нижний колонтитул только на последней странице, используя CSS

1 голос
/ 21 мая 2019

Я работаю над генерацией 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 голосов
/ 21 мая 2019

Ваша проблема - ваш селектор, который ничего не нацеливает.

Этот селектор: 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

Это предназначается для всех элементов с className page-number или last внутри последнего элемента <footer> на странице.

Это, конечно, предполагает, что все ваши нижние колонтитулы - братья и сестры. Если это не так, вы должны двигать :last-of-type или :last-child вверх по дереву, пока не окажетесь на элементах, которые являются братьями и сестрами.

Например, в данном случае: 

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

Вы хотите сопоставить div, а не нижний колонтитул, поскольку псевдоэлементы являются относительными по отношению к их родительскому элементу, и каждый нижний колонтитул является единственным нижним колонтитулом внутри его родителя.

...