CSS - 伪类 :right

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

根据文档的书写方向，确定是“左”还是“右”。如果书写方向是从左到右，则称文档为 :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 on section”。
应用伪类 :right，这将导致页面上设置的边距样式。
第一页和最后一页被视为“右”页面，并应用了 :right的样式，但第二页（偶数）页面包含默认边距。

打印本页