我正在开发一个相当大的网站，该网站上已经有一个很大的样式表。我们正在与这家进行更改的能力有限（没有完全访问权限）的大公司合作。
我们将为网站上的特定部分应用一些新样式，并且如果需要，我们已获准包括第二个覆盖样式表（除了全局样式表之外）。
我的问题是这样的。如果使用这种方法，我们是否需要注意任何浏览器不兼容问题？由于这个网站的受欢迎程度以及他们每天收到的浏览量，我们需要尽可能兼容，我只是想确保我们正在处理的部分的 CSS 覆盖在没有搭便车。
我听说一些谣言说 IE 可能无法正确处理覆盖。这是我们将要做的样式覆盖类型的性质示例......
如果我有身体 { 颜色：蓝色； } 和正文 { 字体重量：粗体； } 在第二个 CSS 文件中，我们会得到蓝色和粗体，对吧？
【问题讨论】：
标签： html css stylesheet
你用你的 CSS 描述的是继承，本质上它会“堆叠”你的 CSS 定义，所以你做了 body { color: blue } , body { font-weight: bold; 的例子。 } 你最终会通过继承得到 body 的两个值（而不是覆盖！）
为了对抗继承，您需要清零或消除主要的 CSS 表单定义。
如果你有这个例子：
body { padding: 5px; color: red }
如果您想在第二张工作表中使用蓝色字体的 3px 边距，您可以执行以下操作来对抗继承
body {padding: 0px; margin: 3px; color: blue }
这样，您可以将填充清零（如果您愿意，可以将其设置为 0，从而有效地取消它）。颜色将被覆盖，边距将是新添加的值。
我建议（如果您还没有）使用启用了 firebug 的 Firefox（双屏在这里有很大帮助，但不是必需的）。 Firebug 会告诉你哪些行由于继承而被取消并且实质上被覆盖了。
您也可以使用自己的类，并像这样在类定义上加倍（或更多）：
.red { color: red; }
.center { text-align: center; }
.w500px { width: 500px; }
<div class="red center w500px">This text is red and centered</div>
这样，您只需将值合并为一个。可能会给您另一个想法，让您了解如何以不同的方式做事。
希望对您有所帮助。
【讨论】：
如果有造成风格的，那么你可以使用
body {
color: #000 !important;
}
!important 覆盖样式。遗憾的是，IE 不支持此功能。
【讨论】：
我认为没有任何不兼容之处。只需确保覆盖的特异性大于“原始”，或者如果它们具有相同的特异性，则在“原始”之后声明覆盖。
更多关于特异性：http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
【讨论】：
据我所知，本质上没有任何浏览器不兼容问题。只需确保您在每一步都在您关心的所有浏览器中进行测试，您应该没问题。
您的“粗体蓝色”示例是正确的。它应该这样工作。
您应该花点时间阅读有关 CSS 特异性和继承性的内容。这些链接将解释 CSS 值如何在同一选择器上的多个规则之间“合并”。
【讨论】：
如果其他人遇到这个问题，这里有一个我发现有用的解决方案。
假设我的原始 style.css 文件中有一个类，如下所示：
.menu-bar { width: 100%; }
我可以通过引用正文和类名来覆盖我的 IE 样式表中的以下内容
body .menu-bar { width: 90%; }
尝试抓取父 div，并在 ie 样式表中引用它。查看下面的示例
<div class="parent">
<div class="children">
<div class="grandchildren">
</div><!-- end grandchildren -->
</div><!-- end children -->
</div><!-- end parent -->
您可以像这样在 IE 样式表中引用父类或祖父类
body .parent { css properties here }
body .parent .children { css properties here }
body .parent .children .grandchildren { css properties here }
【讨论】：