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

Question

在一个DIV中，我放置了一些从数据库加载的文本/HTML代码。这个文本有时包含字体大小定义（例如：字体大小="3"）。是否有一种方法可以使用CSS在这个特定的DIV中覆盖这个字体大小。

感谢任何帮助。

- Sascha C

---

你可以尝试使用!important。 - j08691

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 Fiddle演示。

请注意，font已经被弃用，因此不应使用它（因为该元素的支持可能会突然停止，或者实现可能会无预警地更改）。

顺便说一句，尽管！important可以强制声明覆盖通常层叠的样式，但这是杀鸡焉用牛刀。如果可以避免（在这种情况下似乎可以避免），就应该避免使用它，因为它会使后面的样式调试和相关继承问题变得复杂。

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

参考资料：

• font元素，W3.org.
• font元素，MDN.

- David Thomas

---

+'d，对这个主题有非常好的见解！ - Zuul

使用 font-size: 100% 比 font-size: inherit 更有效（浏览器支持更广）。 - Jukka K. Korpela

Answer 2

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

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

引用：

然而，为了平衡，一个“! important”声明（分隔符令牌“！”和关键字“important”跟随声明）优先于普通声明。

例子

查看这个 工作 Fiddle 示例！

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

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

- Zuul

Answer 3

一个想法：给这些文本标签一个ID或类，然后使用JavaScript查找这些元素并更改它们的样式。

- Viele

Answer 4

在将文本插入到 div 中之前，去掉文本中的 "font" 标签如何？然后只需使用字体大小样式来设置 div。

- yujust

Answer 5

谢谢，我也遇到了同样的问题，无法覆盖嵌套元素a的页脚字体大小。

.footer ul li a {

    font-size: 20px ;
    height: 25px;
}

- user12247270