使用CSS仅在最后一页上删除页脚 [英] Delete the footer only on the last page using CSS
问题描述
我正在生成pdf.我想使用css方法删除最后一页，我试图获取:last-child 进行删除，但结果一无是处.
我的代码:
body {字体家族:"Roboto"，无衬线；字体大小:0.85em;padding-left:30px;padding-right:30像素；行高:0.95em;}@ font-face {字体家族:"Roboto"，无衬线；字体样式:正常；字体粗细:正常；}页脚{位置:固定；底部:-30px；右:0px；高度:50px；宽度:270像素；文字对齐:左；}页脚.page-number:{之后内容:计数器(页面)；}页脚.page-number .last:last-child {显示:无} < body>< footer>< div class ="right" style ="margin-left:-85px;">< span class ="page-number"></span></div>< table width ="100％" class ="last">< tr>< td>< span style =边框:1px实线；box-sizing:border-box； padding-right:0.88cm； padding-left:5px； vertical-align:middle；" Roles I& nbsp;/span>< span style ="width:300px;border-top:1像素实线；右边框:1px实线；边框底部:1px实线；左边距:-6px;box-sizing:border-box； padding-right:70px； vertical-align:middle；>& ensp;& ensp;& ensp;& ensp;& ensp;</span><br>< span style =左边框:1px实线；右边框:1px实线；边框底部:1px实线；box-sizing:border-box； padding-right:1.32cm； padding-left:5px； vertical-align:middle；> Roles II&span;< span style ="width:300px;右边框:1px实线；边框底部:1px实线；左边距:-6px;box-sizing:border-box; padding-right:70px; vertical-align:middle;& ensp;& ensp;& ensp;& ensp;</span></td></tr></table></footer>我的内容在这里，直到N-Page，我想删除最后一个页脚</body> 在此示例中可以看到，我有3页，在页脚中有一些数字和方框，我将其标记为红色.我只想删除红色框中的数据，但是对于页码部分，我不想删除它.
注意:我正在使用dompdf库
您的问题是您的选择器，它没有针对任何对象.
此选择器: footer .page-number .last:last-child 以className为 last 的className为 page-的元素的最后一个子元素为目标页脚元素中的数字.
这看起来像这样:
< footer>< div class ="page-number">< div class ="last"></div>< div class ="last"></div><！-会以该元素为目标-></div></footer> 但是，您的结构如下所示:
< footer>< div class ="right">< span class ="page-number"></span></div>< table class ="last"></table>< footer> 似乎您正在尝试在页面的最后一个页脚元素中同时定位 .page-number 和 .last 可以使用其他伪选择器:last-of-type 完成.
选择器如下所示:
footer:最后一个.page-number，页脚:最后一个类型.最后 这定位到页面上最后一个< footer> 元素内具有className page-number 或 last 的所有元素.
这当然假设您的页脚都是兄弟姐妹.如果不是，则必须将:last-of-type 或:last-child 向上移动到树上，直到位于兄弟姐妹元素上./p>
例如，在这种情况下:
< div>< footer></footer></div>< div>< footer>/footer</div>< div>< footer>/footer</div> 您希望匹配div而不是页脚，因为伪元素是相对于其父级的，并且每个页脚是其父级中唯一的页脚.
I'm working on generate pdf. I want to remove the last page using css method, i'm trying to get :last-child for remove it but the results is nothing.
My code:
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 </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;">     </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; ">     </span>
</td>
</tr>
</table>
</footer>
MY content here until N - Page and i want to remove the last footer
</body>
as you can see in the example in this picture, I have a number of 3 pages and in the footer there are numbers and boxes that I have marked red. I just want to delete the data in the red box, but for the page number section I don't want to delete it.
Note : I'm using dompdf library
Your problem is your selector, which does not target anything.
This selector: footer .page-number .last:last-child is targeting the last child element with className last of an element with className page-number inside a footer element.
This would look something like this:
<footer>
<div class="page-number">
<div class="last"></div>
<div class="last"></div> <!-- It would target this element -->
</div>
</footer>
However, your structure looks like this:
<footer>
<div class="right">
<span class="page-number"></span>
</div>
<table class="last"></table>
<footer>
It seems like you are trying to target both .page-number and .last in the last footer element in the page, which can be done using a different pseudo-selector, :last-of-type.
The selector would look like this:
footer:last-of-type .page-number,
footer:last-of-type .last
This targets all elements with className page-number or last inside the last <footer> element on the page.
This of course assumes that your footers are all siblings. If they are not, then you have to move the :last-of-type or :last-child up the tree until you are on the elements which are siblings.
For instance, in this case:
<div><footer></footer></div>
<div><footer></footer></div>
<div><footer></footer></div>
You would want to match the div, rather than the footer, since pseudo-elements are relative to their parent, and each footer is the only footer inside its parent.
这篇关于使用CSS仅在最后一页上删除页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
