html - なぜ

Question

次の簡単な例を見てください。

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

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

「h2」内の文字列の色は赤だと思っていましたが、まだ黒です。

これはしばらく私を混乱させました。なぜそれが起こるのですか？

score 9 · Accepted Answer

要素に要素<h1>を含めることは許可されていません<h2>(とりわけ、フレージング要素とテキストのみが許可されています)。仕様によると、無効な HTML です。

<h2>ブラウザは、が実際にはの外部にあると見なして、無効な HTML を補おうとします<h1>。

score 3 · Accepted Answer

マークアップがどのようにレンダリングされるかを見ると、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*/
}

score 0 · Accepted Answer

color プロパティをタグ h1 のみに設定し、h2 には設定していません。

これを克服するために、両方のタグに同じ色を設定するクラスを書くことができます

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

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

4 に答える 4