嵌套元素时覆盖 em 字体大小答案

【问题标题】：Override em font-size when elements are nested嵌套元素时覆盖 em 字体大小
【发布时间】：2013-06-10 23:14:51
【问题描述】：

当您有嵌套元素时，如何覆盖 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>

http://jsfiddle.net/dvUTQ/

【问题讨论】：

嗯...如果您使用像素大小，它可以工作，但您希望它专门用于 em 大小？

标签： css overriding font-size

【解决方案1】：

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

【讨论】：

【解决方案2】：

除了dmzza's answer：!important 规则仅在样式表中有选择器与specificity 冲突时才有效。

在你的情况下没有冲突，所以!important 规则没有任何效果。

当您有冲突的特异性时，最好为异常创建一个更具体的选择器。

【讨论】：

【解决方案3】：

您可以使用 CSS3 rem 单位，它是相对于根而不是父级的。我一直陷入同样的困境，因为我正在处理的项目有太多嵌套元素，以至于 em 不可靠。

你可以在这里http://snook.ca/archives/html_and_css/font-size-with-rem找到更多信息。

唯一的问题是 IE8 及更低版本的后备浏览器支持。在声明 rem 大小之前，您仍然需要提供像素大小。尽管有这些额外的编码，它可能仍然值得研究。

【讨论】：

作为参考，rem 单元的 CSS3 规范可以在这里找到：w3.org/TR/css3-values/#rem-unit。