为何h3与h5被a标签包裹时颜色未按预期改变？

我正在学习Shay Howe的《Learn HTML & CSS》课程，其中一课需要为锚点（a标签）设置样式，课程提到h3和h5元素会出现颜色显示异常的问题，需通过添加类并针对类设置样式来修复。我想了解为什么需要这种特殊修复——查看CSS代码后，无法理解颜色未正确应用的原因。我已经检查了CSS，不明白为何锚点的颜色（后定义的样式）未生效，选择器权重相同且锚点颜色是最近指定的。我注意到h1包裹a标签时表现正常，但a标签包裹h3和h5时却无法正常响应，却不知道这其中的影响机制。

相关代码 #

CSS代码 #

/*
  ========================================
  Typography
  ========================================
*/

h1,
h3,
h4,
h5,
p {
  margin-bottom: 22px;
}

h1,
h2,
h3,
h4 {
  color: #648880;
}

h1 {
  font-size: 36px;
  line-height: 44px;
}

h2 {
  font-size: 24px;
  line-height: 44px;
}

h3 {
  font-size: 21px;
}

h4 {
  font-size: 18px;
}

h5 {
  color: #a9b2b9;
  font-size: 14px;
  font-weight: 400;
}

strong {
  font-weight: 400;
}

cite,
em {
  font-style: italic;
}


/*
  ========================================
  Links
  ========================================
*/

a:hover {
  color: #a9b2b9;
}

a {
  color: #648880;
}

HTML代码 #

<header class="container group">

  <h1 class="logo">
    <a href="index.html">Styles <br> Conference</a>
  </h1>

  <h3 class="tagline">August 24&ndash;26th &mdash; Chicago, IL</h3>

  <nav class="primary-nav">
    <a href="index.html">Home</a>
    <a href="speakers.html">Speakers</a>
    <a href="schedule.html">Schedule</a>
    <a href="venue.html">Venue</a>
    <a href="register.html">Register</a>
  </nav>

</header>

<section class="col-1-3">
  <a href="speakers.html">
    <h5>Speakers</h5>
    <h3>World-Class Speakers</h3>
  </a>
  <p>Joining us from all around the world are over twenty fantastic speakers, here to share their stories.</p>
</section>
<!--

      Schedule

      -->
<section class="col-1-3">
  <a href="schedule.html">
    <h5>Schedule</h5>
    <h3>Three Inspiring Days</h3>
  </a>
  <p>Enjoy three inspiring and action-packed days of talks, gatherings, and all-around good times.</p>
</section>
<!--

      Venue

      -->
<section class="col-1-3">
  <a href="venue.html">
    <h5>Venue</h5>
    <h3>The Chicago Theatre</h3>
  </a>
  <p>Within the heart of downtown Chicago, The Chicago Theatre will provide a beautiful conference venue.</p>
</section>
</section>

原因解析 #

核心问题出在CSS样式的优先级与继承规则：

1. 直接样式 > 继承样式：当a标签包裹h3/h5时，h3和h5本身在CSS中有直接设置的color属性（h3属于h1,h2,h3,h4选择器组，颜色为#648880；h5单独设置了颜色#a9b2b9）。这些直接作用在元素上的样式，优先级远高于从父元素（a标签）继承来的样式——哪怕a的样式定义在后面，继承样式的权重始终是最低的，无法覆盖元素自身的直接样式。

2. h1包裹a的正常逻辑：当h1包裹a标签时，a标签自身有直接设置的color属性（#648880），这个直接样式会覆盖从h1继承来的颜色，所以a标签能正常显示设置的颜色，和预期一致。

修复逻辑 #

课程中提到的添加类并针对性设置样式，本质是通过提高选择器权重来覆盖h3/h5原有的直接样式：

比如给h3/h5添加类（如<h3 class="link-heading">），然后编写CSS规则：

a .link-heading {
  color: #648880;
}

这个选择器的权重（元素选择器+类选择器，权重值为0,1,1）高于单纯的h3或h5选择器（权重值为0,0,1），因此能覆盖原有的直接颜色样式，让h3/h5应用a标签内的预期颜色。

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