无法覆盖另一个 CSS 文件中的 font-size:100% 和 font-inherit 属性答案

【问题标题】：Unable to override font-size:100% & font-inherit property in another CSS file无法覆盖另一个 CSS 文件中的 font-size:100% 和 font-inherit 属性
【发布时间】：2015-01-27 03:44:01
【问题描述】：

在我的项目中，我们有一个全局 CSS 文件“global-css”，用于网站的所有网页。这个文件内容，

font-size: 100%;
font: inherit;    
properties for body,div,h1,h2 etc.

以上代码复制的链接http://www.cssreset.com/ - Eric Mayur 的。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
........, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    ***font-size: 100%;
    font: inherit;***
    vertical-align: baseline;
}

我无权编辑这个(global-css) CSS 文件。

但这 2 行在我的网页上造成了 UI 问题。如果我从“global-css”中删除这 2 行，那么我的网页可以正常工作（没有任何 UI 问题）。我想以某种方式将这两行覆盖到我自己的 CSS 文件中（仅在我的网页中导入）。我创建了 1 个 CSS 文件（override-css），我可以在其中覆盖“global-css”中的任何类。

请建议在我的“override-css”中覆盖上述属性的好方法。
感谢您的帮助:)

澄清一下：我想将这些属性设置为 DEFAULT/NULL，以便所有元素都从各自的类中获取字体。

我试图覆盖global-css 中的上述代码，但不幸的是我们没有font 属性的默认值。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
........, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    ***font-size: ________ !important;
    font: ________ !important;***
    vertical-align: baseline;
}

我想要一些属性值来重置 ss-override 中的这 2 个属性。

还有一个 'main.css' CSS 文件，其中包含元素的所有类。但是'global-css'中的这两行不允许应用这种样式。

用于导入 CSS 的顺序是：main -> global-css -> override-css。

【问题讨论】：

我没有完全理解您的问题，但请尝试 !important 在您需要覆盖 css 的地方
您的问题是什么？您要覆盖哪个部分。你能改变 HTML 吗？

标签： css inheritance fonts overriding

【解决方案1】：

您是否尝试过使用 !important 属性。

否则，通常最后一个 css 样式优先。因此，如果您使用属性加载这两个类，则应该覆盖 global.css 样式。

【讨论】：

【解决方案2】：

它不起作用，因为您以错误的顺序导入文件 - 您在上面说过：“用于导入 CSS 的顺序是：main -> global-css -> override-css”。

如果您将该顺序更改为：global-css -> main，您应该会发现一切正常，因为 main 中的内容现在将覆盖 global-css 中的早期设置。而且您根本不需要覆盖文件。这将起作用，因为全局所有 CSS 在规则中具有最低可能的特异性（只有一个元素，例如 h2 或 div 等），因此后面的任何内容都会自动覆盖这些规则。使用 !important 根本不是正确的方法。

如果由于某种原因您无法访问代码来更改导入顺序，您仍然可以在导入全局文件后在 HTML 中再次链接主 CSS 文件（或链接它的副本）或链接，因此确保它的设置将覆盖以前的设置。

【讨论】：

【解决方案3】：

使用 !importent 应该可以解决问题。但这又受制于 CSS 顺序和浏览器。案例：你已经使用了 !importent 并且在你的声明下面有 font size 属性，那么由于它的 CSS 渲染逻辑，你的在某些浏览器（如 chrome）中将无法工作。

最好的方法是删除所有其他适用于元素的字体 CSS 并在你的类中添加相同的内容

【讨论】：

【解决方案4】：

你可以试试

font-style: italic;

这会起作用。

【讨论】：