CSS 伪类

CSS 伪代码-class 选择器 :left 表示打印文档的所有左侧页面。与@page at规则一起使用。

根据文档的书写方向，判断是"左"还是"右"。如果书写方向是从左到右，则文档称为 :right；当主要书写方向是从右到左时，文档称为 :left page。

所有 CSS 属性都不能使用 :left 伪类进行更改。可以更改的属性有边距、填充、边框和背景。仅页面框会受到影响，页面上的内容不会受到影响。

语法

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

CSS :left 示例

这里是一个示例of :left 伪类:

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

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

   section {
      background-image: url('/css/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>

在上面的示例中

  • 创建的文档有两个页面（部分），正如我们所见已使用"page-break-after:始终在部分"。

  • 应用了伪类 :left，这将导致在页面上设置边距的样式。

  • 第一页被视为"右"页并具有默认边距，但第二页（偶数页）包含 :left 应用的样式。