Question

我正在开发一个非常大的网站，网站上已经有一个很大的样式表。我们正在与这家大公司合作，进行更改的能力有限（无法完全访问）。

我们将为网站上的特定部分应用一些新样式，如果需要，我们已经获得了第二个覆盖样式表（除了全局样式表）之外的绿灯。

我的问题是这个。如果使用此方法，是否需要注意任何浏览器不兼容问题？由于这个网站的受欢迎程度以及他们每天收到多少观点，我们需要尽可能兼容，我只是想确保我们的CSS覆盖我们正在使用的部分没有顺利。

我听说过有些传言说IE可能无法正确处理覆盖。这是我们将要做的样式覆盖类型的一个例子......

如果我有身体{颜色：蓝色;和body {font-weight：bold;在第二个CSS文件中，我们会变成蓝色和粗体对吗？

Answer 1

你用CSS描述的是继承，基本上它会“堆叠”你的css定义，所以你做了body {color：blue}的例子，body {font-weight：bold;你将通过继承（而不是重写！）

结束身体的两个值

要抵消继承，你需要将主要的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>

这样您只需将值组合成一个。可能会给你另一个关于如何以不同方式做事的想法。

希望有所帮助。

Answer 2

如果存在造成的样式，则可以使用

body {
    color: #000 !important;
}

！重要的是覆盖了风格。可悲的是，IE不支持这一点。

Answer 3

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

你的'大胆的蓝色'的例子是正确的。它应该这样工作。

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

Answer 4

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

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

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 }

CSS覆盖第二个样式表

5 个答案: