4

ネストされた要素がある場合、font-size プロパティをどのようにオーバーライドしますか? !importantを使用しても効果がないようです。

div {
    font-size:6em;  
}
p {
    font-size:1em !important;
}
span {

    font-size:1em;
}

-

<html>
<body>
    <div><span>span</span><p>paragraph</p></div>
</body>
</html>​

</p>

http://jsfiddle.net/dvUTQ/

4

3 に答える 3

13

Em は、親要素に対する相対的なサイズです。

http://jsfiddle.net/dvUTQ/3/

div#small {
  font-size:2em; 
}
div#big {
  font-size:6em;
}
p {
  font-size:.5em; /* effective sizes: big: 3em, small: 1em */
}
span {
  font-size:2em; /* effective sizes: big: 12em, small: 4em */
}

子要素を 1em に設定すると、親と同じサイズになります。この場合、p の .5em は事実上 3em になります。

http://www.w3schools.com/cssref/css_units.asp

于 2012-09-17T05:07:13.883 に答える
5

dmzza の回答に加えて: このルールは、スタイル シートに競合する特異性!importantを持つセレクターがある場合にのみ有効です。

あなたの場合、競合はなかったので、!importantルールは何の効果もありませんでした。

競合する特異性がある場合は、例外に対してより具体的なセレクターを作成することをお勧めします。

于 2012-09-17T08:50:35.700 に答える
4

親ではなくルートに相対的な CSS3 rem ユニットを使用できます。私が取り組んでいるプロジェクトには非常に多くのネストされた要素があり、em が信頼できないため、私はこの同じジレンマに陥っています。

詳細については、http://snook.ca/archives/html_and_css/font-size-with-remを参照してください。

唯一の問題は、IE8 以下のフォールバック ブラウザ サポートです。rem サイズを宣言する前に、ピクセル サイズを指定する必要があります。この余分なコーディングにもかかわらず、検討する価値があるかもしれません。

于 2013-06-10T15:14:51.133 に答える