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

main>div.list-of-titles:first-child+section.dedication+section.preface,
main>div.list-of-titles:first-child+section.dedication+section.chapter,
main>div.list-of-titles:first-child+section.preface,
main>div.list-of-titles:first-child+section.chapter {
  border: solid 1px red;
}

<main>
  <div class="list-of-titles">list of titles</div>
  <section class="dedication">dedication</section>
  <section class="preface">preface1</section>
  <section class="preface">preface2</section>
  <section class="chapter">chapter1</section>
  <section class="chapter">chapter2</section>
</main>
<main>
  <div class="list-of-titles">list of titles</div>
  <section class="dedication">dedication</section>
  <section class="chapter">chapter1</section>
  <section class="chapter">chapter2</section>
</main>
<main>
  <div class="list-of-titles">list of titles</div>
  <section class="preface">preface1</section>
  <section class="preface">preface2</section>
  <section class="chapter">chapter1</section>
  <section class="chapter">chapter2</section>
</main>
<main>
  <div class="list-of-titles">list of titles</div>
  <section class="chapter">chapter1</section>
  <section class="chapter">chapter2</section>
</main>