CSS - 偽類 :left

CSS 偽類選擇器:left表示列印文件中的所有左側頁面。它與@page at-rule 一起使用。

根據文件的書寫方向，確定它是“左”還是“右”。如果書寫方向為從左到右，則文件被稱為:right，當主要書寫方向為從右到左時，則為:left頁面。

並非所有 CSS 屬性都可以使用:left偽類更改。可以更改的屬性包括margin、padding、border和background。只有頁面框會受到影響，而頁面上的內容不會受到影響。

語法

@page :left {
   /* ... */ 
}

CSS :left 示例

這是一個:left偽類的示例

<html>
<head>
<style>
      @page :left {
      margin: 2in 3in;
   }

   body {
      background-color: #333;
      display: grid;
   }

   section {
      background-image: url('images/border.png');
      border-radius: 10px;
      display: grid;
      margin: 2px;
      padding: 0.25rem;
      place-items: center;
      width: 35%;
      print-color-adjust: exact;
      -webkit-print-color-adjust: exact;
   }

   section {
      page-break-after: always;
      break-after: page;
   }

   button {
      padding: 10px;
      width: 100px;
      margin-left: 55px;
      margin-top: 10px;
   }
</style>
</head>
<body>
   <div>
      <section>
      <h1>Page 1</h1>
      </section>
      <section>
      <h1>Page 2</h1>
      </section>
      <button>Print</button>
   </div>
   <script>
      document.querySelector("button").addEventListener('click', () => {
      window.print();
      });
   </script>
</body>
</html>

在上面的示例中

建立了一個包含兩個頁面（部分）的文件，因為我們在 section 上使用了 'page-break-after: always。
應用了偽類:left，這將導致頁面上設定的 margin 的樣式。
第一頁被視為“右側”頁面並具有預設邊距，但第二頁（偶數頁）包含 :left 應用的樣式。

列印頁面