CSS - 伪类选择器 :right

CSS 伪类选择器 :right 表示打印文档中所有右侧页。

根据文档的书写方向，确定是“左”还是“右”。如果书写方向是从左到右，则文档被称为:right；如果主要书写方向是从右到左，则它是:left 页。

并非所有 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>Print</button>
    </div>
   <script>
      document.querySelector("button").addEventListener('click', () => {
      window.print();
      });
   </script>
</body>
</html>

在上面的例子中

创建了一个包含三页（节）的文档，因为我们在节上使用了 'page-break-after: always。
应用了伪类:right，这将导致页面上设置的边距样式。
第一页和最后一页被认为是“右侧”页，并应用了 :right 的样式，但第二页（偶数页）包含默认边距。

打印页面