CSS印刷媒体场景下，如何选择main下首个preface/chapter类的section子元素

要精准选中main元素下第一个属于section.preface或section.chapter的子元素（即你定义的「真实内容起始元素」），从而执行页码重置，可采用以下两种方案：

方案一：使用:has()选择器（逻辑清晰，推荐） #

这个方案分两种场景处理，覆盖所有情况：

/* 场景1：文档存在前言章节时，选中第一个前言章节重置页码 */
main > section.preface:first-of-type {
  counter-reset: page;
}

/* 场景2：文档不存在前言章节时，选中第一个正文章节重置页码 */
main:not(:has(> section.preface)) > section.chapter:first-of-type {
  counter-reset: page;
}

方案二：不依赖:has()的兼容写法 #

如果你的印刷CSS引擎暂不支持:has()，可以用兄弟选择器实现相同逻辑：

/* 选中第一个前言章节（如果存在） */
main > section.preface:first-of-type {
  counter-reset: page;
}

/* 选中第一个正文章节，且该章节前无任何前言章节 */
main > section.chapter:first-of-type:not(main > section.preface ~ section.chapter) {
  counter-reset: page;
}

关键说明 #

• :first-of-type用于锁定同类型元素中的第一个，避免误选前面的section.dedication（献词）元素
• 执行counter-reset: page后，后续内容会以阿拉伯数字重新开始页码计数，目录、献词部分则保持罗马数字页码，契合传统书籍的排版需求。

内容的提问来源于stack exchange，提问作者Frank Steimke