具有相同特性的父/子类的优先级

Question

在给定的代码片段中，为什么 h1 元素的字体大小是 36px？ 我有这些问题：

1. 如果 h1 是第一个定义的，那么 main 的字体大小（即 32px）应该应用于 h1 标题，因为它是稍后定义的。 （我不明白父子优先级）
2. main 和 h1 的特异性相同吗？
3. 如果我先定义 main，顺序重要吗？

h1 {
  border: 2px dashed red;
  width: 50%;
  font-size: 36px;
  padding: 0.5em;
}

main {
  font-size: 2rem;
}

<main>
  <h1>Article 1</h1>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur labore corporis doloremque assumenda a! Aut minus minima delectus. Repellat natus voluptate, ad pariatur doloribus ipsum sit expedita fugiat et reiciendis!
  </p>
</main>

在这

我交换了main和h1定义的位置，但字体大小仍然是36px？

main {
  font-size: 2rem;
}

h1 {
  border: 2px dashed red;
  width: 50%;
  font-size: 36px;
  padding: 0.5em;
}

<main>
  <h1>Article 1</h1>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur labore corporis doloremque assumenda a! Aut minus minima delectus. Repellat natus voluptate, ad pariatur doloribus ipsum sit expedita fugiat et reiciendis!
  </p>
</main>

Answer 1

的字体大小为 36px，因为它的选择器相比主选择器具有更高的特异性，并且两个选择器的特异性是相同的。因此，它们的定义顺序不会影响结果。