CSS 伪类

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

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

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

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

语法

:first {
   /* ... */ 
}

CSS :第一个示例

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

  • 创建的文档包含三个页面，因为我们在 p 元素上使用了 page-break-after: 始终。

  • 应用了伪类 :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>打印</button>
   <script>
      document.querySelector("button").addEventListener("click", () => {
      window.print();
      });
   </script>
</body>
</html>