CSS - 伪类 :left_CSS 菜鸟教程

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

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

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

语法

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

CSS :left 示例

下面是一个示例伪类 :left ：

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

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

	 	section {
	 	 	 background-image: url('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： always on section”。
应用伪类 :left，这将导致在页面上设置边距的样式。
第一页被视为“右”页，并具有默认边距，但第二页（偶数）页包含：left 应用的样式。

<< CSS - 伪类 :last-of-type CSS - 伪类 :link >>