用第二个样式表覆盖CSS

Question

我正在处理一个非常大的网站，该网站已经有了一个大型样式表。我们与一家能力有限的大公司合作，无法进行全面更改（没有完全访问权限）。

我们将为网站上的特定部分应用一些新样式，并获得了绿灯可以包括第二个覆盖样式表（除全局样式表之外）。

我的问题是：如果使用此方法，是否需要注意任何浏览器不兼容性问题？由于此网站的流行程度以及每天接收的访问量很多，我们需要尽可能地兼容。我只是想确保我们正在处理的部分的CSS覆盖没有问题。

我听说过IE可能无法正确处理覆盖。以下是我们将要执行的样式覆盖类型的示例...

如果在第二个CSS文件中有body { color:blue; }和body { font-weight:bold; }，那么我们会得到蓝色和粗体对吗？

- Will Ashworth

Answer 1

你所描述的CSS是继承，基本上它会“堆叠”你的CSS定义，所以像你所举例的body { color: blue }，body { font-weight: bold; }，你最终会通过继承获得body的两个值（而不是覆盖！）

为了对抗继承，你需要将主要的CSS样式定义清零或消除。

因此，如果你有以下示例：

body { padding: 5px; color: red }

如果你希望在次要样式表中设置3像素的外边距和蓝色字体颜色，以抵消继承的影响，你需要执行以下操作：

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>

这种方法可以将值合并成一个。也许会给你关于如何以不同的方式处理问题的另一个想法。

希望能对你有所帮助。

- Jakub

Answer 2

如果存在冲突的样式，您可以使用以下方法：

body {
    color: #000 !important;
}

!important 能够覆盖样式。遗憾的是，IE浏览器不支持这个属性。

- MacMac

---

你应该更具体地说明IE6不支持它，而IE7+支持它。 - jessegavin

我刚得知我们计划支持的版本（目前正在等待客户批准）是：FireFox 2+，Internet Explorer 7+，Safari 3+，Chrome 1+。 - Will Ashworth

Answer 3

据我所知，本质上没有任何浏览器不兼容的问题。只要确保在每个步骤中测试您关心的所有浏览器，您就应该没问题。

您提到的“粗体蓝色”示例是正确的。它应该按照这种方式工作。

您应该花点时间阅读有关CSS特异性和继承的内容。这些链接将解释CSS值如何在同一选择器上的多个规则之间“合并”。

• http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
• http://www.w3.org/TR/CSS2/cascade.html

- jessegavin

Answer 4

我认为没有任何不兼容性。只需确保您的覆盖特定性大于“原始”的特定性，或者如果它们具有相同的特定性，则在“原始”之后声明覆盖。

更多关于特定性的信息：http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

- davehauser

---

当然。我们会确保正确定义层次结构，直接调用所需的样式。我只是想确认即使回溯到IE6，我的样式/覆盖也能正常工作，并且没有任何随意的浏览器在最后一天给我搞砸。 - Will Ashworth

没有办法考虑到所有的随机浏览器。你真的需要决定要测试哪些浏览器。我猜你不会担心 Netscape 3。只需创建您的列表并在途中进行测试，测试和测试。 - jessegavin

Answer 5

如果其他人也遇到这个问题，这里是我找到的一个有用的解决方案。

比如说我在我的原始 style.css 文件中有一个类别，像这样：

.menu-bar { width: 100%; }

我可以通过引用body然后类名来覆盖我的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 }

- coletrain