CSS 伪类

CSS 伪类 :right 代表打印文档的所有右侧页面。与@page at规则一起使用。

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

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

语法

:right {
   /* ... */ 
}

CSS :right 示例

这里是一个示例:right 伪类:

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

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

   section {
      background-image: url('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>
      <section>
      <h1>Page 3</h1>
      </section>
      <button>打印</button>
    </div>
   <script>
      document.querySelector("button").addEventListener('click', () => {
      window.print();
      });
   </script>
</body>
</html>

在上面的示例中

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

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

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