如何打破 CSS 继承？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11850665/
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
How to break CSS inheritance?
提问by German
I have created a web widget. That my client put in their websites. Basically on load it calls webservice and loads data specific to client.
我创建了一个网络小部件。我的客户放在他们的网站上。基本上在加载时它会调用 webservice 并加载特定于客户端的数据。
As a result it looks like:
结果看起来像：
<div class="widget">
<div class="container">
</div>
</div>
Dynamically I apply CSS styles to my widget class. To look consistent with our corporate styling.
我动态地将 CSS 样式应用于我的小部件类。与我们的企业风格保持一致。
The problem is when client application styles overwrite the style I applied run time.
问题是当客户端应用程序样式覆盖我在运行时应用的样式时。
For example if client has, it overwrites my styles:
例如，如果客户端有，它会覆盖我的样式：
body {
margin: 0 auto;
padding: 0;
width: 90%;
font: 70%/1.4 Verdana, Georgia, Times, "Times New Roman";
}
Is there any way to break inheritance? Just to say whatever div with class widget styles has do not inherit parent styles.
有没有办法打破继承？只是说具有类小部件样式的任何 div 都不会继承父样式。
回答by jmbertucci
I don't think you can break CSS inheritance per say, but you can try to circumvent it by following the rules of CSS specificity.
我不认为你可以打破 CSS 继承，但你可以尝试通过遵循 CSS 特异性规则来规避它。
A good Specificity article
一篇很好的特异性文章
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Try adding !importantto styles in the widget to give it a higher specificity than the default styles.
尝试!important在小部件中添加样式，使其比默认样式具有更高的特异性。
#myWidget{
font: 100%/1 "Times New Roman", Serif !important;
}
EDIT
编辑
If the client is also using !importantit could cause problems. If you could setup jsFiddle.com with an example, we could help find the issue.
如果客户端也在使用!important它可能会导致问题。如果您可以使用示例设置 jsFiddle.com，我们可以帮助您找到问题。
I hope that helps!
我希望这有帮助！
EDIT2
编辑2
Note, going the route of adding !importantshould be a last resort as it's the 'trump card' of style rules.
请注意，走添加路线!important应该是最后的手段，因为它是样式规则的“王牌”。
回答by PJH
You can not force elements to NOT inherit parent styles.
您不能强制元素不继承父样式。
You can however override all possible styles that you do not want changed. If your CSS specificity is higher than the customers specificity then your styles will be dominate/expressed on the page.
但是，您可以覆盖所有您不想更改的可能样式。如果您的 CSS 特异性高于客户的特异性，那么您的样式将在页面上占主导地位/表达。
See:
看：
CSS Specificity via css-tricks.com
Per your example using the code below would be more specific than the bodydeclaration and thus override :
根据您的示例，使用下面的代码将比body声明更具体，因此覆盖：
.widget .container {
font-family: Arial;
}
回答by Nasir
You could also try inline styling. Inline styling has the highest priority. This will work if client overrides use an imported stylesheet.
你也可以试试inline styling。内联样式具有最高优先级。如果客户端覆盖使用导入的样式表，这将起作用。
Like others have mentioned, another option is !important.
就像其他人提到的那样，另一种选择是!important.
You can also read up the relevant specs at http://www.w3.org/TR/CSS2/cascade.htmlwhere they describe exactly how they cascade. If above mentioned tricks don't work, perhaps specs will give you a clue or you will know for certain that this is not possible.
您还可以在http://www.w3.org/TR/CSS2/cascade.html上阅读相关规范，其中详细描述了它们的级联方式。如果上述技巧不起作用，也许规格会给你一个线索，或者你肯定知道这是不可能的。
回答by Mauro Colella
Use of the !important css attribute is considered a bad practice. Because it introduces the potential for precedence conflicts, and makes it extremely difficult to troubleshoot css in the long run.
使用 !important css 属性被认为是一种不好的做法。因为它引入了优先级冲突的可能性，并且从长远来看使得对 css 进行故障排除变得极其困难。
A less intrusive approach to this problem is to delimit your widget with an id, and in your stylesheet, to reset some of the most important style declarations using the "universal" selector, such as:
解决这个问题的一种不太侵入性的方法是用 id 分隔小部件，并在样式表中使用“通用”选择器重置一些最重要的样式声明，例如：
#myWidget *{
margin: 0;
padding: 0;
background: none;
border: none;
}
For example. Then, define your overrides specifically.
例如。然后，专门定义您的覆盖。
回答by John Mitchell
You can't break style inheritance as such, but you can ensure that your styles are either more important or loaded in the right order so yours comes out on top.
您不能像这样破坏样式继承，但是您可以确保您的样式更重要或以正确的顺序加载，以便您的样式排在最前面。
Have a look at the !importanttag.
看看!important标签。
Alternatively if you load your stylesheets after theirs yours will take precedent (unless theirs is inline). You can use Javascript to load your styles after the body has loaded (But then you'd get a "flicker" effect).
或者，如果您在他们的样式表之后加载样式表，您的样式表将优先（除非他们的样式表是内联的）。您可以在主体加载后使用 Javascript 加载您的样式（但是您会得到“闪烁”效果）。
