0

親の外側と同じようにdiv、親の内側のフォントサイズを指定しようとしています..divdivdiv

私は持っている

html

<div id='parent' >
 <div class='testclass'><b>title</b><br> contents here</div>

</div>

 <div class='testclass'><b>title2</b><br> contents here</div>
 <div class='testclass'><b>title3</b><br> contents here</div>
 <div class='testclass'><b>title4</b><br> contents here</div>

私のCSS

parent{
font-size:.8em;font-weight:bold;
}

.testclass{
font-size:1.1em
}

親のdiv外側はdiv正しいフォント サイズ ( 1.1em) ですが、親の内側のフォント サイズdivは外側よりも小さくなっていdivます。ただし、で em の代わりに 15px を指定すると、testclass. すべて正常に動作します。これを解決する方法はありますか？どうもありがとう。

4

3 に答える 3

3

親のCSSルールは実際には次のようになっていると思います。

#parent {
    font-size:.8em;font-weight:bold;
}

その場合、これは理にかなっています。.testclass`＃parent＃のセレクターをオーバーライドする簡単な方法は2つあります。

  • testclassのような別のより具体的なセレクターを作成します#parent .testclass, .testclass {...}

  • ！importantフラグを使用して、フォントサイズ宣言を.testclassオーバーライドします。.testclass{ font-size:1.1em !important;}

于 2012-08-21T18:30:52.133 に答える
0

+1 鎮圧。しかし、IE7/FF3.6 以降では>、第 1 レベルの子を指定するためにも使用できます。したがって、以下も正しいdivをターゲットにします

#parent > div {
    font-size:.8em;font-weight:bold;
}

あるいは

#parent > .testclass {
    font-size:.8em;font-weight:bold;
}
于 2012-08-21T18:48:55.853 に答える
0

emは相対的です。私が言いたいのは、それらが積み重ねられ、パーセンテージのようなものだということです。

あなたが言うなら：

body { font-size : 20px; }

#parent { font-size : 2em; }
#child  { font-size : 3em; }

あなたが実際に行っていることは、(ems は正確に px を意味するわけではないことに注意してください。それらは M 測定を意味しますが、すべての意図と目的のために、ここでは実質的に同じことです):

Body = 20px;
Parent = Body * 2; //200% of the M-measurement of Body's font-size.
Child = Parent * 3; // 300% of the M-measurement of Parent's font-size,
                // which would be 600% of Body at this point

代わりに、あなたが探しているものは次のとおりです。

Body = 20px;
Parent = Body * X;
Child =  Parent * 1/X;

元：

Body = 20px;
Parent = 2em;  // 40px, effectively
Child = 0.5em; // This 0.5 is referring to half of Parent's em
               // As the parent was 2x body, this sets Child to body's height


Body = 15px;
Parent = 0.8em;  // 15 * 0.8 = 12
Child = 1.25em;  // 12 * 1.25 = 15

CSS3 の解決策は、rems を使用することです。バンドではありません。 rems は常にルートに対して相対的です。

したがって、次のように設定した場合:

Child = 1rem;

親 (または祖父母) の設定に関係なく、ドキュメントの基本サイズの 100% に等しくなります (そして、emChild の下の要素を相対的にサイズ設定するために使用できます)。

これは CSS3 であるため、FireFox と Chrome は を幅広くサポートしていますがrem、IE9+ のみであることに注意してください。

そのため、数学の入門書も提案しました。

于 2012-08-21T18:50:24.730 に答える