2

下記のコードを書いてみました。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        html {
            font-size: 10px;
        }
    </style>
</head>
<body>
    aaaaaaa
    <h1>h</h1>
    bbbb
</body>
</html>

結果:
画像の説明をここに入力

Chromeデベロッパーツール:
画像の説明をここに入力

デベロッパーツールを見ると、ユーザーエージェントのスタイルシートが適用されてしまっているのがわかります。

ネットを見ると borderは継承されないと書いている例をみますが、font-sizeは継承されると言及しているページを多くみます。確かに htmlの子要素であるbody要素には継承されていますが、h1は例外なのでしょうか?(ほかにh2にも試しましたが、やはり継承されていませんでした)

なお

h1 {
    font: inherit;
}

をCSSに加えると継承しました。

1 件の回答 1

5

継承されていますが、ユーザーエージェントのスタイルシートによるh1要素へのスタイル指定で上書きされています。
その要素へのスタイル指定は、親から継承されたものよりもユーザーエージェントのスタイルシートによるものが優先されるからです。

なお

h1 {
   font: inherit;
}

をCSSに加えると継承しました。

これはh1要素へ親から継承するように指定しているので、ユーザーエージェントのスタイルシートの指定よりも優先されます。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。