当各种可选元素有效时，如何选择第一个元素？

Question

我在CSS印刷媒体领域。我有遵循以下结构的 HTML 文档：

具有以下子元素的

main

元素：

• 强制：

  div.list-of-titles

  元素（文档有目录、图表、图像......在此

  div

  中）
• 可选：

  section.dedication

  元素（文档可能有奉献精神）
• 可选且无限制：

  section.preface

  （文档可能有一个或多个前言部分）
• 强制且无限制：

  section.chapter

  （文档有一个或多个章节）

对于好的老式书籍，我想用目录和奉献（如果有）用罗马数字对页面进行编号，用十进制/阿拉伯数字对实际内容进行编号。为此，当

真正的内容

开始时，我必须做一个counter-reset: page。

实际内容可以从第一个

section.preface

元素开始，或者，如果没有这样的元素，则从第一个

section.chapter

元素开始。所以我的问题是：

我如何选择main元素的

第一个子元素

，它是一个

section

并且具有

preface

类或

chapter

类？

谢谢， 弗兰克·史泰姆克

Answer 1

在 CSS 中，您可以将

:first-child

伪类与

section

选择器和

is()

伪类函数一起使用。

main section:first-child:is(.preface, .chapter) {
  /*Your styles here*/
}

希望对您有帮助！