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 的樣式，但第二頁（偶數頁）包含預設邊距。

列印頁面