4

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

​</p>

http://jsfiddle.net/dvUTQ/

4

3 回答 3

13

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

于 2012-09-17T05:07:13.883 回答
5

除了dmzza 的回答：该!important规则仅在样式表中的选择器具有冲突特异性时才有效。

在您的情况下，没有冲突，因此该!important规则不会产生任何影响。

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

于 2012-09-17T08:50:35.700 回答
4

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

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

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

于 2013-06-10T15:14:51.133 回答