同优先级父子类样式优先级问题：h1字体大小为何始终为36px？

问题背景 #

交换以下两段CSS中main与h1的定义顺序后，页面中h1元素的字体大小始终保持为36px，由此提出三个疑问：

1. 若先定义h1，后定义main的font-size: 2rem（通常对应32px），为何该样式未作用于h1？无法理解父子元素的样式优先级逻辑；
2. main选择器与h1选择器的*特异性（specificity）*是否相同？
3. 若先定义main选择器，样式定义顺序是否会产生影响？

代码片段参考 #

代码片段1

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>

代码片段2

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>

疑问解答 #

1. 为何main的font-size未作用于h1？
   font-size属于可继承CSS属性，父元素main的样式会传递给子元素，但继承的样式优先级远低于元素自身直接定义的样式。你给h1直接写了font-size: 36px，不管main的样式定义顺序在它之前还是之后，h1都会优先使用自己的这个样式，而不是继承父元素的2rem。这不是父子选择器的优先级竞争，而是“元素自身样式”和“继承样式”的层级差异——自身样式永远比继承来的优先级高。

2. main与h1选择器的特异性是否相同？
   两者完全相同。main和h1都是元素选择器，元素选择器的特异性权重为0,0,0,1，没有任何权重差异，所以它们的特异性是一致的。

3. 先定义main的话，样式顺序会有影响吗？
   不会有影响。因为main的font-size是作用于父元素的，而h1的font-size是直接作用于自身的，两者不是针对同一个元素的同属性样式竞争。只有当两个选择器作用于同一个元素，且特异性相同时，定义顺序才会生效（后面的样式覆盖前面的）。这里h1自身有明确的font-size定义，不管main的样式写在前面还是后面，都不会覆盖h1的自身样式。

内容的提问来源于stack exchange，提问作者Shubhang Sahu