使用 CSS 覆盖 DIV 中的字体大小

Question

在 DIV 中，我放置了一些从数据库加载的文本/html 代码。此文本有时包含字体大小定义（例如：font size=“3”）。有没有办法使用 CSS 在这个特定的 DIV 中覆盖这个字体大小。

我很感激任何帮助。

原文由 Sascha C 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

假设标记类似于以下内容：

 <div>
    <font size="1">Some text at 'size="1"'</font> and natively-sized text, with more at <font size="26">'size="26".'</font>
</div>​

然后你可以显式地指示 CSS inherit font-size 来自父元素的—：

 div {
    font-size: 1.5em;
}
div font {
    font-size: inherit;
}

JS 小提琴演示。

当然，请注意 font 已被弃用，因此不应使用（因为对该元素的支持可能会在没有通知的情况下停止，和/或实现在没有警告的情况下发生变化）。

顺便说一句，虽然 !important 将强制声明覆盖通常的样式级联，但要用大锤才能敲开坚果；并且，如果它可以避免（在这种情况下，似乎 _可以避免_）它应该是，因为它会使以后的样式调试和相关的继承问题复杂化。

此外，这是在治疗您的问题的症状；您真正面临的问题是内容/数据库中存在 font 标签。这应该通过删除元素并用适当样式的元素替换它们来纠正，例如 em ， span 等等……

参考：

• font 元素，位于 W3.org 。
• font MDN 中的元素。

原文由 David Thomas 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用 CSS !important 符号，您告诉浏览器覆盖在您的 div 中定义的任何字体大小：

从上面的链接中可以看出：

但是，为了平衡，“!important”声明（分隔符标记“!”和关键字“important”跟在声明后面）优先于普通声明。

例子

请参阅此 有效的小提琴 示例！

 .htmlContents * {font-size:10px!important;}

<div class="htmlContents">my database html content</div>

原文由 Zuul 发布，翻译遵循 CC BY-SA 3.0 许可协议