CSS - 伪类 :first

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

并非所有 CSS 属性都可以使用:first 伪类更改。可以更改的属性是文档的边距、孤行、寡行和分页。此外，使用此伪类时，只能使用绝对长度单位表示边距。所有其他属性将被忽略。

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

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

语法

:first {
   /* ... */ 
}

CSS :first 示例

以下示例演示了: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>

打印页面