CSS 防止子元素继承父样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5080365/
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 to prevent child element from inheriting parent styles
提问by makville
Possible Duplicate:
How do I prevent CSS inheritance?
可能的重复：
如何防止 CSS 继承？
Is there a way to declare the CSS property of an element such that it will not affect any of its children or is there a way to declare CSS of an element to implement just the style specified and not inherit any of the style declared for its parents?
有没有办法声明一个元素的 CSS 属性，这样它就不会影响它的任何子元素，或者有没有办法声明一个元素的 CSS 来实现指定的样式而不继承为其父项声明的任何样式?
A quick example
一个简单的例子
HTML:
HTML：
<body>
<div id='container'>
<form>
<div class='sub'>
Content of the paragraph
<div class='content'>Content of the span</div>
</div>
</form>
</div>
</body>
CSS:
CSS：
form div {
font-size: 12px;
font-weight: bold;
}
div.content {
/* Can anything go here? */
}
Under normal circumstances one would expect the The text block "Content of the paragraph" and "Content of the span" will both be 12px and bold.
在正常情况下，人们会期望文本块“段落内容”和“跨度内容”都是 12px 和粗体。
Is there a property to include in the CSS above in the "div.content" block that will prevent it from inheriting the declaration in the "#container form div" block to limit the style to just "content of the paragraph" and spare "Content of the span" including any other children div?
是否有一个属性要包含在上面的“div.content”块中的 CSS 中，以防止它继承“#container form div”块中的声明，以将样式限制为“段落的内容”并保留“跨度的内容”包括任何其他子 div？
If you are wondering why, well, I created a particular CSS file that gives all the forms on my project a particular feel and the divs under the form all inherit the feel. No problem. But inside the the form I want to use Flexigrid but flexigrid inherits the style and it just looks useless. If I use flexigrid outside the form and such it won't inherit the forms css, then it looks great. Otherwise it just looks terrible.
如果你想知道为什么我创建了一个特定的 CSS 文件，它给我项目中的所有表单一种特殊的感觉，并且表单下的 div 都继承了这种感觉。没问题。但是在表单内部我想使用 Flexigrid 但 flexigrid 继承了样式，它看起来没用。如果我在表单外使用 flexigrid 并且它不会继承表单 css，那么它看起来很棒。否则它看起来很可怕。
回答by Boldewyn
Unfortunately, you're out of luck here.
不幸的是，你在这里倒霉了。
There is inheritto copy a certain value from a parent to its children, but there is no property the other way round (which would involve another selector to decide whichstyle to revert).
有inherit从父到其子复制一定价值，但没有物业倒过来（这将涉及另一个选择，以决定其恢复的风格）。
You will have to revert style changes manually:
您必须手动还原样式更改：
div { color: green; }
form div { color: red; }
form div div.content { color: green; }
If you have access to the markup, you can add several classes to style precisely what you need:
如果您有权访问标记，则可以添加多个类来精确设置您需要的样式：
form div.sub { color: red; }
form div div.content { /* remains green */ }
Edit:The CSS Working Group is up to something:
编辑：CSS 工作组正在做一些事情：
div.content {
all: revert;
}
No idea, when or if ever this will be implemented by browsers.
不知道何时或是否会由浏览器实现。
Edit 2:As of March 2015 all modern browsers but Safari and IE/Edge have implemented it: https://twitter.com/LeaVerou/status/577390241763467264(thanks, @Lea Verou!)
编辑 2：截至 2015 年 3 月，除 Safari 和 IE/Edge 之外的所有现代浏览器都已实现：https: //twitter.com/LeaVerou/status/577390241763467264（谢谢，@Lea Verou！）
Edit 3:defaultwas renamed to revert.
编辑 3：default已重命名为revert.
回答by Kriem
Can't you style the forms themselves? Then, style the divs accordingly.
你不能自己设计表单吗？然后，相应地设置 div 的样式。
form
{
/* styles */
}
You can always overrule inherited styles by making it important:
您始终可以通过使其重要来否决继承的样式：
form
{
/* styles */ !important
}
回答by Cristian Radu
CSS rules are inherited by default - hence the "cascading" name. To get what you want you need to use !important:
默认情况下继承 CSS 规则 - 因此有“级联”名称。要获得您想要的东西，您需要使用 !important：
form div
{
font-size: 12px;
font-weight: bold;
}
div.content
{
// any rule you want here, followed by !important
}
