为什么 <h1> 中的 <h2> 不继承颜色属性的值？答案

【问题标题】：Why does a <h2> inside a <h1> not inherit the value of color property?为什么 <h1> 中的 <h2> 不继承颜色属性的值？
【发布时间】：2013-09-18 08:58:36
【问题描述】：

看这个简单的例子：

<style>
   h1 {
      color: red;
   }
</style>

<h1>this is the 'h1'.<h2>this is the 'h2'</h2></h1>

我预计 'h2' 中字符串的颜色是红色，但它仍然是黑色。

这让我困惑了一段时间。为什么会这样？

【问题讨论】：

h1 标签不应包含 h2 标签 ...
@sunivengg：您已将颜色属性设置为仅标记 h1 而不是 h2。
如果您在 h1 中使用 h2 标签，则验证失败。
大家都说过，不要把一个标题标签放在另一个标题标签里面。看看下面的@kevin-bowersox 帖子，我认为这是最有用的。干杯！

标签： html css

【解决方案1】：

<h1> 元素不允许包含 <h2> 元素（除其他外；仅允许 phrasing elements 和文本），因此根据规范认为 HTML 无效。

浏览器试图通过考虑<h2>实际上是在<h1>之外来补偿无效的HTML，这导致了观察到的结果。

【讨论】：

非常有帮助！非常感谢！

【解决方案2】：

如果您查看标记的呈现方式，您会注意到h2 标记在h1 标记之外呈现。

将这些标签相互嵌套是不正确的语法。

渲染标记

<h1>this is the 'h1'.</h1>
<h2>this is the 'h2'</h2>

尝试使用span 切换h2，并根据需要设置样式。

HTML

<h1>this is the 'h1'.<span>this is the 'h2'</span></h1>

CSS

h1.span{
   /*desired styling*/
}

【讨论】：

【解决方案3】：

引自HERE

例如，HTML 4.01 的 DTD 说 H1-H6 是块级元素带有内联内容模型。因此，出于布局目的，它们出现在一个新行，但出于内容目的，它们不应包含其他块级元素。

【讨论】：

【解决方案4】：

您已将颜色属性设置为仅标记 h1 而不是标记 h2。

为了克服这个问题，你可以编写类来为两个标签设置相同的颜色

<style>
   .color1 {
  color: red;
  }
</style>

<h1 class="color1">this is the 'h1'.<h2 class="color1">this is the 'h2'</h2></h1>

【讨论】：

Karthik，很抱歉这样与您联系，但我不知道如何与您取得联系。我注意到您投票决定将我的问题 stackoverflow.com/questions/26743387/… 搁置。它现在已经被编辑得更清楚了，我急需一个答案。请考虑撤回您的投票，以便我尽快悬赏。