Precedence in parent/child classes of same specificity

Question

In the given code snippet why font size of h1 element is 36px? I have these questions :

1. If h1 is defined 1st, then the font size of main(i.e. 32px) should be applied on the h1 heading, as it is defined later. (I dont understand the parent, child precedence)
2. Is the specificity same for main and h1?
3. Does the order matter if i define main first?

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>

In this

I exchanged the position of main and h1 definitions, but the font size is still 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

the font size of is 36px because its selector has a higher specificity compared to the main selector, and the specificity of both selectors is the same. Therefore, the order of their definitions does not affect the result.