:first

Avatar of Sunkanmi Fafowora
Sunkanmi Fafowora

DigitalOcean 为您的旅程各个阶段提供云产品。 立即开始使用 $200 的免费信用额度!

:first CSS 伪类与 @page at-rule 结合使用,用于选择打印文档中的第一页。 它与 :first-child 选择器选择父容器中的第一个子元素的方式非常相似,但它选择的是在将文档发送到打印机时一系列页面中的第一页。

@page :first {
  margin: 50%;
}

因此,您知道如何打印任何网页吗? 当网页在物理上打印时,它可能无法完全适合一张纸。 并且当要打印的页面不止一页时,可以使用 :print 伪类来选择和设置第一页的样式。

Showing three printed pages with the :first property CSS above it and pointed at the first page.

:first 伪类在 CSS 页面媒体模块级别 3 规范 中定义,该规范当前处于编辑草案状态。 这意味着 :first 仍在积极开发中,在它完全实施为候选推荐时可能会发生变化。

语法

@page :first { }

根据 MDN:first 只能设置第一页的 marginpage-breakorphanswidows 属性。 但经过测试,margin 是在撰写本文时唯一对第一页有明显影响的属性。

演示

在下面的演示中,我们创建了三个 <section> 元素。 我们在每个元素之后强制分页符,以便在发送到打印机时得到总共三页。

这是相关的 CSS

@page :first {
  margin: 50%;
}

section {
  page-break-after: always;
  break-after: always;
}

使用 :first,我们选择三页中的第一页,并为其设置了一个超大边距。 最后两页将没有额外的边距。

浏览器支持

IEEdgeFirefoxChromeSafariOpera
8全部186全部
iOS SafariOpera MobileAndroid 浏览器Chrome for AndroidFirefox for Android
6全部4.4全部
来源:caniuse

规范

CSS 页面媒体模块级别 3

更多信息