こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

cssセレクタ優先度について

https://qiita.com/oh_rusty_nail/items/e896825cd54e5c0a3666

優先度の計算方法はわかっているのですが、以下の場合なぜそうなるかがわかりません。
htmlが
<div id="hoge"><div id="poge"><h1>エイチワン(後半略


h1{ font-size:10px};
#hoge > #poge{ font-size:50px}

のcssの場合、id 2つある50pxが強そうに見えますが、なぜ要素のみのh1が勝つのでしょうか?

投稿日時 - 2017-10-23 13:10:39

QNo.9389036

困ってます

質問者が選んだベストアンサー

前者は要素そのものを指定しているのに対し、後者は親要素に指定しているという違いがありますね。つまり、後者は継承を期待していることになります。

継承を期待するには、h1のfont-sizeがinheritである必要がありますが、それがh1の指定によって、10pxに指定されているため継承は成立しません。つまり、優先順位の問題ではないとうことです。
ちなみに、h1#hogeという要素があった場合は、タグ名で指定するよりID名で指定したほうが優先順位が高いです。これがいわゆる優先順位の話です。

投稿日時 - 2017-10-23 15:43:58

お礼

なるほど、理解しました。 ありがとうございます。

そして手元で悩んでいた問題には user agent stylesheet も絡んでいました。謎がクリアになりスッキリです!

投稿日時 - 2017-10-23 15:57:36

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)