为什么</h2> <h1>中的<h2>不会继承color属性的值？</h1>

Question

看看这个简单的例子：

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

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

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

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

Answer 1

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

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

Answer 2

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

将这些标记嵌套在一起并不是正确的语法。

呈现标记

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

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

<强> HTML

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

<强> CSS

h1.span{
   /*desired styling*/
}

Answer 3

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

要解决此问题，您可以编写类来为两个标记设置相同的颜色

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

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

Answer 4

引自HERE

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