DigitalOcean 为您的旅程各个阶段提供云产品。 立即开始使用 $200 的免费信用额度!
:first
CSS 伪类与 @page
at-rule 结合使用,用于选择打印文档中的第一页。 它与 :first-child
选择器选择父容器中的第一个子元素的方式非常相似,但它选择的是在将文档发送到打印机时一系列页面中的第一页。
@page :first {
margin: 50%;
}
因此,您知道如何打印任何网页吗? 当网页在物理上打印时,它可能无法完全适合一张纸。 并且当要打印的页面不止一页时,可以使用 :print
伪类来选择和设置第一页的样式。

:first
伪类在 CSS 页面媒体模块级别 3 规范 中定义,该规范当前处于编辑草案状态。 这意味着 :first
仍在积极开发中,在它完全实施为候选推荐时可能会发生变化。
语法
@page :first { }
根据 MDN,:first
只能设置第一页的 margin
、page-break
、orphans
和 widows
属性。 但经过测试,margin
是在撰写本文时唯一对第一页有明显影响的属性。
演示
在下面的演示中,我们创建了三个 <section>
元素。 我们在每个元素之后强制分页符,以便在发送到打印机时得到总共三页。
这是相关的 CSS
@page :first {
margin: 50%;
}
section {
page-break-after: always;
break-after: always;
}
使用 :first
,我们选择三页中的第一页,并为其设置了一个超大边距。 最后两页将没有额外的边距。

浏览器支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
8 | 全部 | 否 | 18 | 6 | 全部 |
iOS Safari | Opera Mobile | Android 浏览器 | Chrome for Android | Firefox for Android |
---|---|---|---|---|
6 | 全部 | 4.4 | 全部 | 否 |