Named Pages 是 CSS 分页媒体中为特定内容申请独立页面样式的能力，区别于全局生效的普通 @page；它需先用 page 属性指定元素使用某命名页，再通过 @page <name> 单独定义该页的尺寸、方向、边距等，仅在打印或 PDF 导出时生效。
什么是 named pages，它和普通 @page 有什么区别
named pages 不是给整个文档设一套 @page，而是让特定内容“申请”一个带名字的页面类型，再单独定义这个类型的行为。比如你有一份报告，封面要 A4 纵向、无页眉；正文要 A4 横向、带页码；附录又要回到纵向、但页边距更大——这时用 @page 全局规则根本做不到，必须靠命名页面。
关键点在于：普通 @page 作用于所有打印页面；而 named pages 需要两步配合：1）用 page 属性指定元素使用哪个命名页面；2）用 @page <name> 单独定义该命名页的样式。浏览器只在支持 CSS Paged Media 的环境下识别它（Chrome / Edge 支持较好，Firefox 有限，Safari 基本不支持）。
如何声明并应用一个 named page
假设你想让某个 <section class="cover"> 使用名为 cover-page 的特殊页面设置：
- 先在 CSS 中定义命名页：
@page cover-page { size: A4 portrait; margin: 0; } - 再给对应 HTML 元素加上
page属性：<section class="cover" style="page: cover-page;">...
- 注意：
page属性只能作用于**块级根容器**（如<body>、<section>、<article>），不能写在<p>或<div>内部嵌套元素上 - 如果多个相邻元素都指定了同一命名页（比如连续两个
section[page="cover-page"]），它们会尽可能塞进同一页；若内容超长，则自动分页，新页仍沿用cover-page设置
常见错误：为什么命名页没生效
最常踩的坑不是写法错，而是环境或层级问题：
立即学习“前端免费学习笔记（深入）”；
-
page属性被父级display: inline或float干扰，导致它不被视为“分页上下文根”，请确保目标元素是块级且未被非标准布局打断 - 用了
@media print包裹@page cover-page—— 错！@page规则本身**不能嵌套在媒体查询里**，它必须是顶层 CSS 规则 - 试图在同一个命名页里混用
:first或:left伪类，例如@page cover-page:first—— 目前所有浏览器都不支持这种组合，命名页和伪类是互斥的 - 期望命名页能影响屏幕渲染 —— 它只在
window.print()或 PDF 导出时触发，开发调试阶段看不到效果，得靠打印预览确认
多命名页协同与实际限制
你可以同时定义多个命名页，并在不同区域切换，但要注意浏览器的实际承载能力：
- Chrome 当前最多支持约 10–15 个不同命名页定义，再多可能被忽略或报 CSS 解析警告（控制台里搜
Invalid CSS可看到） - 不能用 JavaScript 动态插入
@page xxx规则，CSSOM 不暴露该接口；必须提前写死在样式表中或<style>标签内 - 命名页之间无法继承或 extend，每个都要完整写出尺寸、边距、方向等，没法像 CSS 类那样复用；建议用预处理器变量管理重复值
- 如果某段内容既需要命名页，又需要强制分页（比如封面后必须另起一页），得额外加
break-before: page，因为page属性本身不触发分页
真正难的不是语法，而是判断哪些内容值得独立成 named page —— 封面、目录、章节起始页、附录、图表页，这些视觉语义明确、格式差异大的区块才适合，别为了“隔离样式”滥用它。
