Question

如果嵌套元素，如何覆盖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/

Answer 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只会使其与父元素的大小相同。在这种情况下，.5em对p有效地使它成为3em。

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

Answer 2

除dmzza's answer之外：!important规则仅在样式表中的选择器具有冲突的specificity时生效。

在您的情况下没有冲突，因此!important规则无效。

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

Answer 3

你可以使用CSS3 rem单元，它相对于root而不是父。我一直困扰着同样的困境，因为我正在研究的项目有如此多的嵌套元素，以至于em不可靠。

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

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

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

3 个答案: