使用 CSS 文本的百分比 - 如何停止从父级继承字体大小答案

【问题标题】：using percentages for css text - how do i stop inheritance of font-size from parent使用 CSS 文本的百分比 - 如何停止从父级继承字体大小
【发布时间】：2009-10-13 13:05:19
【问题描述】：

我有这样的事情

 <body>
    <h2>
    Blue 
    <span>
    <a ....>add to combo</a>
    </span>
    </h2>
  </body>

和css

#body {font-size: 100%}
h2{font-size: 200%}
a{font-size: 80%}

现在我一直在阅读并意识到链接不会是 100% 的 80%，而是 200%（100%）的 80%，因为百分比取自父母的尺寸。

但是，我希望我所有的字体大小声明都以百分比表示，而不是继承，而只是从一些站点范围的基本字体大小计算——比如 16 像素？

你是怎么做到的？

【问题讨论】：

标签： css font-size

【解决方案1】：

您的代码无法实现您想要的。您想继承字体 1 的特定大小，然后 childNodes 中的每个字体大小都将相对于父级。

如果你想使用某些字体大小而不是继承你应该明确设置它们

这就是说永远不要尝试使用重要的语句。请检查 CSS 如何将他的属性分配给 HTML 节点

http://www.w3.org/TR/CSS2/cascade.html#specificity

【讨论】：

但我认为明确设置字体大小并不好，因为这并不能让用户通过浏览器设置他们想要的大小。我想要的是能够设置我的字体大小，但如果用户通过浏览器更改字体大小，他们可以，但我的文本仍然是成比例的。
如果您想按比例指定字体大小，请使用“em”单位作为字体。

【解决方案2】：

尝试使用“！important”规则：

http://www.w3.org/TR/CSS2/cascade.html#important-rules

【讨论】：

除非给出明确的font-size，否则不会像问题中解释的那样级联吗？
我还建议您使用像“Firebug”这样的工具来实时编辑/查看您的 CSS 属性以使用它们。这个工具的一个很好的特点是它会准确地告诉你哪些属性被评估，哪些被覆盖，以及为什么。
如果你使用重要的规则编辑会更难及时。尝试弄清楚“级联”规则在 css 中是如何工作的。 w3.org/TR/CSS2/cascade.html#specificity

【解决方案3】：

我认为您不能覆盖继承，因为这是级联样式表级联的一部分。

对于您的使用，您要么必须明确说明使用（非常）特定选择器的元素的字体大小（这可能会很快变得非常乏味且容易出错），例如：

h2 span a {font-size: 18px; } /* or whatever */

或者重新排序您的 html，以便 span 是 h2 的兄弟，而不是后代。不过，我同意这应该是可能的。

【讨论】：