Question

我正在尝试在父div内指定div的字体大小，与父div外的div相同。

我有

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外的字体大小。但是，如果我在testclass中指定15px而不是em。一切正常。有什么办法解决这个问题？非常感谢。

Answer 1

我假设您父母的CSS规则实际上是：

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

在这种情况下，这是有道理的。你有两种简单的方法可以使.testclass覆盖`＃parent＃'的选择器：

为testclass #parent .testclass, .testclass {...}制作另一个更具体的选择器，如.testclass
使用！important 标记覆盖.testclass{ font-size:1.1em !important;}覆盖的字体大小声明：{{1}}

Answer 2

+1开始了。但是在IE7 / FF3.6中你也可以使用>来指定第一级孩子。所以以下内容也将针对正确的div

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

甚至

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

Answer 3

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解决方案是使用rem s。不是乐队。 rem相对于根始终。

所以如果你设置：

Child = 1rem;

它将等于文档基本大小的100％，无论其父（或祖父母）的设置是什么（然后您可以使用em相对大小的子元素。）

请注意，这是CSS3，因此虽然FireFox和Chrome广泛支持rem，但它只是IE9 +。

这就是为什么我也建议使用数学入门书。

如何在不同的div中指定字体大小？

3 个答案: