We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

这篇翻译不完整。请帮忙从英语翻译这篇文章

简介

:first @page CSS 伪类选择器 描述的是:打印文档的时候,第一页的样式。

提示:你不能改变所有的css属性. 你只能改变 margins、 orphans、 widows、文档什么时候换页。别的所有css样式都会被忽略。

语法

:first

示例

HTML

<p>First Page.</p>
<p>Second Page.</p>
<button>Print!</button>

CSS

@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

p {
  page-break-after: always;
}

JavaScript

document.querySelector("button").onclick = function(){ window.print() }

结果

点击下面的 print 按钮来打印这个例子。第一页的文字会在中间显示, 其他页的内容在默认位置显示。

提示:在定义margin的时候,你可以只用绝对长度单位, 点击 length 查看更多内容。

规范

规范 状态 备注
CSS Paged Media Module Level 3
:first
Working Draft 无更改
CSS Level 2 (Revision 1)
:first
Recommendation 首次定义

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

特性 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基础支持 ? (Yes) 未实现 8.0 9.2 ?
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基础支持 ? (Yes) 未实现 ? ? ?

 

参见

文档标签和贡献者

此页面的贡献者: xingkongs
最后编辑者: xingkongs,