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>

列印頁面