特定页面设置空白页眉的CSS分页代码问题求助

我看了你的代码，问题出在空白页的CSS分页规则写法上——@page blank :left这种组合不符合CSS Paged Media的规范，导致第一页的页眉没有被正确重置为空白。咱们来调整一下代码就能解决：

修正后的完整代码 #

@page { 
  size: 7in 9.25in; 
  margin: 27mm 16mm 27mm 16mm; 
}
/* 定义左侧页面的页眉 */
@page :left { 
  @top-left { 
    content: "Here is a story"; 
  } 
}
/* 单独定义空白页面，重置页眉为空白 */
@page blank { 
  @top-left { 
    content: normal; 
  }
  /* 继承基础页面的尺寸和边距，避免布局偏移 */
  size: inherit;
  margin: inherit;
}

div.titlepage, div.chapter, div.appendix { 
  page-break-after: always; 
}
div.titlepage { 
  page: blank; 
}

<div class="titlepage"> <h1>Title Page</h1> </div>
<div class="chapter"> <h1 style="color:red">Chapter 1</h1> <p> Text goes here </p> </div>
<div class="chapter"> <h1 style="color:blue">Chapter 2</h1> <p> More text goes here </p> </div>

关键修改说明 #

• 把原来的@page blank :left拆分成独立的@page blank规则：CSS中页面选择器的正确语法是先指定页面名称，再可选添加伪类（比如:left），直接组合会导致规则不生效。单独定义空白页面后，我们可以明确重置它的页眉内容为normal（即无内容）。
• 给空白页面加上size: inherit和margin: inherit：确保空白页的尺寸、边距和其他页面一致，避免第一页和后续页面出现布局错位。
• 原有的div.titlepage { page: blank; }保持不变，它会让标题页强制使用我们定义的空白页面规则，实现第一页页眉空白的效果。

这样调整后，标题页（第一页）的页眉会是空的，后续章节的左侧页面都会显示"Here is a story"的页眉，其他分页和样式功能也能正常工作。

内容的提问来源于stack exchange，提问作者Dan Nick