font-weightが効かない

Question

現在、プロゲートの道場コース中級編をやっています。

<div class="heading"> <h2>Learn Where to Get Started!</h2> </div> こういう一文があるのですが CSSで文字の太さをノーマルに変更したく、 .heading { font-weight: normal; } とすると変更できず .heading h2 { font-weight: normal; } とすると変更できます。 どうして、h2が必要なのか教えて欲しいです。

初歩的な質問ですいません

Answer 1

h2 のデフォルトのスタイルシートに font-weight が指定されているからです。

15.3.6 Sections and headings

h2 { ...; font-weight: bold; }

h2 の親に font-weight を指定しても、h2 は依然としてデフォルトのルールセットにマッチするので、親の font-weight を継承しません。h2 にマッチするルールセットで上書きする必要があります。

Comments

[kirakira3003]

ありがとうございます！