CSS / SASS选择间接子项的第一次出现

Question

我想选择第一个出现<main/>的间接子元素的元素。我不介意使用SASS / SCSS语法来实现这一点，如果这是目前唯一的方法：

<style>
  main header:first-of-type {
    color: red;
  }
</style>
<main>
  <div>
     <header>I'm red</header>
     <header>I'm black</header>
     <div>
       <header>I'm black</header>
     </div>
  </div>
  <div>
     <header>I'm black</header>
  </div>
</main>

Answer 1

将选择器用作main > * header:first-of-type

main > * header:first-of-type {
  color: red;
}

<main>
  <div>
     <header>I'm red</header>
     <header>I'm black</header>
  </div>
  <header>I'm black</header>
</main>