本文深入解析 CSS 中父元素与子元素选择器在相同特异性（specificity）下的层叠规则，阐明为何 h1 的 font-size: 36px 始终生效，而 main { font-size: 2rem } 无法继承影响其子标题——关键不在声明顺序，而在选择器作用目标不同。

本文深入解析 css 中父元素与子元素选择器在相同特异性（specificity）下的层叠规则，阐明为何 `h1` 的 `font-size: 36px` 始终生效，而 `main { font-size: 2rem }` 无法继承影响其子标题——关键不在声明顺序，而在**选择器作用目标不同**。

在您提供的 HTML 与 CSS 示例中，<h1></h1> 元素最终呈现 36px 字体大小，根本原因并非“后定义覆盖先定义”，也不是因为 h1 选择器比 main 更高优先级（二者特异性确实相同：均为单标签选择器， specificity 均为 0,0,1,0），而是因为：CSS 层叠（cascade）仅对同一元素的多个样式声明起作用，而 main 和 h1 选择的是两个不同的元素。

让我们拆解实际发生的过程：

✅ main { font-size: 2rem } 的作用范围

• 2rem 是相对于 <main></main> 自身字体大小的计算值；
• 但 <main></main> 元素本身没有显式设置 font-size，因此它继承自根元素（），通常为 16px → 所以 2rem = 32px；
• 这个 32px 仅定义了 <main></main> 元素自身的字体大小，并作为继承上下文传递给其后代（如 <p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>）；
• ⚠️ 但它不会强制覆盖已对子元素（如 <h1></h1>）单独声明的 font-size。

✅ h1 { font-size: 36px } 的作用范围

• 该规则直接、明确地设置了 <h1></h1> 元素自身的字体大小为 36px；
• 根据 CSS 继承机制：当一个元素拥有自身声明的 font-size 时，它将忽略父元素的继承值（即 <main></main> 的 2rem 不会“穿透”覆盖 h1 的显式声明）；
• 因此，无论 h1 规则写在 main 前或后，只要它存在且未被更高特异性规则（如 .main h1 或 #header h1）覆盖，就必然生效。

? 验证：交换顺序 ≠ 改变结果

/* 无论顺序如何，效果一致 */
main { font-size: 2rem; }
h1   { font-size: 36px; } /* 直接命中 h1 → 覆盖继承 */

h1   { font-size: 36px; }
main { font-size: 2rem; } /* 仍只影响 main 及其可继承后代（如 p），不干扰 h1 */

? 关键结论与最佳实践

• 特异性（Specificity）只用于解决“同一元素上多个冲突声明”的优先级问题；main 和 h1 选择不同元素，不构成冲突，故特异性比较在此不适用；
• 继承（Inheritance）是单向的、可被显式声明中断的：父设 font-size → 子（如 p）继承；但若子（如 h1）自己设了 font-size，继承即终止；
• 若希望 h1 尊重 main 的缩放比例，应使用相对单位并避免硬编码：

  main { font-size: 2rem; }
  h1   { font-size: 1.5em; } /* 1.5 × 2rem = 3rem = 48px（基于 main）*/

• ✅ 检查工具：在浏览器开发者工具中查看 <h1></h1> 的 Computed 样式，你会看到 font-size: 36px 来源为 h1 规则，而 font-size 的“继承自”显示为 main —— 这正说明：继承值存在，但被更直接的声明覆盖。

理解这一机制，是掌握 CSS 层叠与继承本质的关键一步：样式生效与否，取决于“谁被选中”和“是否被显式定义”，而非“谁写在后面”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！