CSS - 伪类 :first

CSS 伪类选择器 :first 选择打印文档的第一页。它与 @page at 规则一起使用。

所有 CSS 属性都不能使用 :first 伪类来更改。可以更改的属性包括文档的边距、孤立属性、寡节点和分页符。此外，在使用此伪类时，只能使用绝对长度单位用于边距。所有其他属性都将被忽略。

Orphan 是一个 CSS 属性，用于设置块容器中的最小行数，该行数必须显示在页面底部。

Widow 是一个 CSS 属性，它设置块容器中的最小行数，该行数必须显示在页面顶部。

语法


:first {
	 	/* ... */	
}

CSS ：第一个示例

以下示例演示了 :first 伪类的用法。在这里我们看到：

创建一个包含三页的文档，正如我们 <p> 元素使用了 page-break-after： always 。
应用伪类 :First，这将导致仅在第一页上设置边距的样式。文本将显示在页面的右下角。其余两页在其默认位置显示文本。


<html>
<head>
<style>
	 	@page :first {
	 	 	 margin-left: 80%;
	 	 	 margin-top: 80%;
	 	}

	 	p {
	 	 	 page-break-after: always;
	 	 	 background-color: lightblue;
	 	 	 padding: 5px;
	 	}
</style>
</head>
<body>
	 	<p>Page One</p>
	 	<p>Page Two</p>
	 	<p>Page Three</p>
	 	<button>Print Me</button>
	 	<script>
	 	 	 document.querySelector("button").addEventListener("click", () => {
	 	 	 window.print();
	 	 	 });
	 	</script>
</body>
</html>

打印本页