首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

:first

:first

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

代码语言:javascript
复制
/* Selects the content on the first page while printing */
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

注意:你不能用所有的CSS属性:first。您只能更改文档的边距,orphans, widows 和分页符。所有其他的CSS属性将被忽略。

语法

代码语言:javascript
复制
:first

HTML

代码语言:javascript
复制
<p>First Page.</p>
<p>Second Page.</p>
<button>Print!</button>

CSS

代码语言:javascript
复制
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

p {
  page-break-after: always;
}

JavaScript

代码语言:javascript
复制
document.querySelector("button").onclick = function(){
  window.print();
}

结果

按“ "Print!" 按钮打印示例。第一页上的单词应该位于中间的某个位置,而其他页面的内容则位于默认位置。

注:在定义边距时,只能使用绝对长度单位。请看关于长度想了解更多信息。

规范

Specification

Status

Comment

CSS Paged Media Module Level 3The definition of ':first' in that specification.

Working Draft

No change

CSS Level 2 (Revision 1)The definition of ':first' in that specification.

Recommendation

Initial definition

浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

?

(Yes)

No support

8.0

9.2

?

Feature

Android

Edge

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Basic support

?

(Yes)

No support

?

?

?

扫码关注腾讯云开发者

领取腾讯云代金券