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 应用的样式。

打印页面