スタイルシートの優先順位について

解決済

質問者：issa_srv
質問日時：2007/11/28 02:08
回答数：2件

以下のようなHTMLとCSSを記述したとします。

<p>タグに囲まれた「test」という文字に対して、Bodyタグから
font-size:10emと、PタグからFontChangeクラスを指定して、
font-size:0.1emを適用しています。

一見、優先順位の高いFontChangeクラスの0.1emが「test」に対して適用されそうに見えますが、
実際には両方のスタイルが適用され、中途半端なフォントサイズになります。

優先順位を無視してスタイルが2重適用されるのは何故でしょうか？
ご教授下さい。

宜しくお願いします。

<html>
<head>
<style type="text/css">

</style>
</head>
<body>
<p class="FontChange" >test</p>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1ベストアンサー

回答者： leap_day
回答日時：2007/11/28 02:40

こんにちは

font-sizeのemは親要素に対して比較されます
http://www.tohoho-web.com/css/basic.htm#Unit
http://www.hajimeteno.ne.jp/stylesheet/css1/p-fo …

ですのでbodyにfont-sizeを設定していなければデフォルトで1emなのでそのまま1/10の0.1emになります

今回は親となるbodyに10emを設定していますのでその1/10となるわけですので1emとなります

<style type="text/css">

</style>
</head>
<body>
<div class="fontbase">
<p class="FontChange" >test</p>
</div>

なので↑のようにしてやるとbodyは10em、その子要素となる<div class="fontbase">は1/10の1emに、孫要素となる<p class="FontChange">は親（<div class="fontbase">）が1emですのでその1/10の0.1emとなります（0.1emが表示できるブラウザによりますが）

- 0
- 件

通報する

No.2

回答者： benelli
回答日時：2007/11/28 02:55

CSSの仕様ではem指定は絶対値ではなく相対値であると決められています。

またfont-sizeの仕様には、相対値では親要素のフォントサイズを参照すると明記されています。
継承される以上、親要素BODYで指定された相対サイズを継承したP要素は、その場で絶対値指定をしない限りは親要素の影響を受けます。

優先順位を無視しているのではなく、継承のルールに則り正しく処理しているに過ぎないわけです。

http://www.y-adagio.com/public/standards/tr_css2 …
http://www.y-adagio.com/public/standards/tr_css2 …