Html 使用第二个样式表覆盖 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3671315/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS override with second stylesheet
提问by Will Ashworth
I'm working on a pretty large website that has a big stylesheet already on the website. We're working with this large corporation with limited ability to make changes (no full access).
我正在一个相当大的网站上工作，该网站上已经有一个很大的样式表。我们正在与这家更改能力有限的大公司合作（没有完全访问权限）。
We'll be applying some new styles for a specific section on the website and we've been given the green light to include a second override stylesheet (in addition to the global one) if needed.
我们将为网站上的特定部分应用一些新样式，如果需要，我们已获准包含第二个覆盖样式表（除了全局样式表）。
My question is this. Are there any browser incompatibility issues we need to be aware of if using this method? Due to the popularity of this website and how many views they receive daily, we'll need to be as compatible as possible and I'm just wanting to make sure that our CSS overrides for the sections we're working with go off without a hitch.
我的问题是这个。如果使用这种方法，是否有我们需要注意的浏览器不兼容问题？由于这个网站的受欢迎程度以及他们每天收到的浏览量，我们需要尽可能兼容，我只是想确保我们正在处理的部分的 CSS 覆盖没有拴住。
I've heard of some rumors that IE may not handle the overrides correctly. Here's an example of the nature of the types of style overrides we'll be doing...
我听说过一些谣言说 IE 可能无法正确处理覆盖。这是我们将要做的样式覆盖类型的性质的一个例子......
if i have body { color:blue; } and body { font-weight:bold; } in the second CSS file, we'll get blue and bold right?
如果我有身体 { 颜色：蓝色；} 和 body { font-weight:bold; 在第二个 CSS 文件中，我们会得到蓝色和粗体，对吗？
回答by Jakub
What you are describing with your CSS is inheritance, and essentially it will 'stack' your css definitions, so as you made the example of body { color: blue } , body { font-weight: bold; } you will end up with both values for body via inheritance (not overriding!)
你用你的 CSS 描述的是继承，本质上它会“堆叠”你的 css 定义，所以你做了 body { color: blue } , body { font-weight: bold; 的例子。您最终将通过继承获得 body 的两个值（不是覆盖！）
To counter the inheritance, you would need to zero out, or elminate the primary css sheets defnition.
要对抗继承，您需要将主要 css 表定义归零或取消。
so if you had the example:
所以如果你有这个例子：
body { padding: 5px; color: red }
and you wanted to have a 3px margin with font color blue in your 2ndary sheet you would do the following to counter the inheritance
并且您希望在第二张纸中有一个 3px 的边距，字体颜色为蓝色，您将执行以下操作来对抗继承
body {padding: 0px; margin: 3px; color: blue }
That way you would zero out the padding (to 0, if you so wished, effectively canceling it out). Color would be overwritten, and margin would be the new value added.
这样你就可以将填充归零（归零，如果你愿意，可以有效地取消它）。颜色将被覆盖，而边距将是新增加的值。
I would suggest (if you already don't) to use Firefox with firebug enabled (dual screens help here greatly, but not needed). Firebug will show you which lines are canceled out due to inheritance and in essence are overwritten.
我建议（如果您已经不这样做）使用启用了 firebug 的 Firefox（双屏幕在这里很有帮助，但不是必需的）。Firebug 将显示哪些行由于继承而被取消，并且本质上被覆盖。
You could also utilize your own classes, and double (or more) up on the class definition like so:
您还可以使用自己的类，并像这样在类定义上加倍（或更多）：
.red { color: red; }
.center { text-align: center; }
.w500px { width: 500px; }
<div class="red center w500px">This text is red and centered</div>
This way you just combine the values into one. Might give you another idea on how to go about something differently.
通过这种方式，您只需将这些值合二为一。可能会给你另一个关于如何以不同的方式去做某事的想法。
Hope that helps.
希望有帮助。
回答by MacMac
If there are inflicting styles then you could use the
如果有造成风格，那么你可以使用
body {
color: #000 !important;
}
!important overrides the style. Sadly, IE does not support this though.
!important 覆盖样式。可悲的是，IE 不支持这一点。
回答by jessegavin
There aren't inherently any browser incompatibility issues that I know of. Just make sure that you're testing in all the browsers you care about with each step and you should be fine.
据我所知，本质上没有任何浏览器不兼容问题。只要确保您在每一步都在您关心的所有浏览器中进行测试，您应该没问题。
Your example of 'bold blue' is correct. It should work that way.
你的“大胆的蓝色”的例子是正确的。它应该这样工作。
You should take a moment and read about CSS specificity and inheritance. These links will explain how CSS values are "merged" between multiple rules on the same selector.
您应该花点时间阅读有关 CSS 特殊性和继承的内容。这些链接将解释 CSS 值如何在同一选择器上的多个规则之间“合并”。
回答by davehauser
I don't think there are any incompatibilities. Just make sure, that the specificity of your overrides is greater than the "original's" or if they have the same specificity, the override is declared after the "original".
我不认为有任何不兼容。只要确保您的覆盖的特异性大于“原始”，或者如果它们具有相同的特异性，则覆盖在“原始”之后声明。
More about specificity: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
更多关于特异性：http: //www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
回答by coletrain
If anyone else is having this problem, here's a solution that I've found useful.
如果其他人遇到这个问题，这里有一个我发现有用的解决方案。
Say I have a class in my original style.css file like so:
假设我的原始 style.css 文件中有一个类，如下所示：
.menu-bar { width: 100%; }
I can override the following in my IE stylesheet by referencing body then class name like so
我可以通过引用正文然后类名来覆盖我的 IE 样式表中的以下内容
body .menu-bar { width: 90%; }
Try to grab the parent div, and reference it in the ie stylesheet. Checkout the example below
尝试获取父 div，并在 ie 样式表中引用它。查看下面的示例
<div class="parent">
<div class="children">
<div class="grandchildren">
</div><!-- end grandchildren -->
</div><!-- end children -->
</div><!-- end parent -->
You can reference the parent or grandparent class like so in your IE stylesheet
您可以在 IE 样式表中像这样引用父类或祖父类
body .parent { css properties here }
body .parent .children { css properties here }
body .parent .children .grandchildren { css properties here }
