CSS元素伪不覆盖子元素样式

Question

所以我想为包含其他 html 元素的锚元素设置样式。基本代码是：
HTML：

  <div class="container" id="sub-menu">
    <div class="row" data-bind="foreach: subMenu">
      <a href="#">
        <div class="col-md-3 col-sm-6">
            <h3><span>title</span></h3>
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</div>
        </div>
      </a>
    </div>
  </div>

引导类不会打扰您 :)
这里是 CSS（由 less 生成）：

#sub-menu {
  margin-top: 10px;
}
#sub-menu a span {
  color: black;
}
#sub-menu a div {
  color: #6b6b6b;
}
#sub-menu a:hover {
  color: red !important;
  text-decoration: none;
}

目标是当用户将鼠标悬停在锚点上时，文本颜色应为红色。使用此解决方案，红色未应用，但文本装饰效果很好。这是fiddle edition
如果我在 a 级别上设置颜色，效果很好 (fiddle) 或根本不设置颜色 (fiddle)，但我需要为标题和正文部分设置不同的颜色。
我还尝试为每个元素（fiddle demo）设置悬停伪，但装饰对所有元素都有效，但只有当我将鼠标悬停在确切元素上时才会应用颜色。 我想实现第二个版本，但像第一个版本一样使用自定义颜色。
感谢您的帮助。

编辑：我忘记解释 h3 标记中也有一个图标，所以这就是为什么跨度标记中的标题。

Answer 1

如果您尝试为锚元素中包含的所有元素着色，这应该可以工作

#sub-menu a:hover *{
    color: red;
}