0

我正在尝试将我的div内部父级的字体大小指定为与父级的外部div相同..divdiv

我有

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
}

parent的div外部div具有正确的字体大小 ( 1.1em)，但 parent 内部的字体大小div小于 outside div。但是，如果我在testclass. 一切正常。有什么办法可以解决这个问题？非常感谢。

4

3 回答 3

3

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

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

在这种情况下，这是有道理的。您有两种简单的方法来.testclass覆盖`#parent#' 选择器：

  • testclass为like制作另一个更具体的选择器#parent .testclass, .testclass {...}

  • 使用!important标志在.testclass覆盖中声明字体大小：.testclass{ font-size:1.1em !important;}

于 2012-08-21T18:30:52.133 回答
0

+1 镇压。而且在IE7/FF3.6 上也可以使用>指定一个第一级子级。因此以下内容也将针对正确的 div

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

甚至

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

ems 是相对的。我的意思是他们堆叠，有点像百分比。

如果你说：

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%，无论其父（或祖父母）设置为什么（然后您可以使用em相对大小的子元素下的元素）。

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

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

于 2012-08-21T18:50:24.730 回答