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 应用的样式。
