CSS来防止子元素inheritance父types

可能重复:
我如何防止CSSinheritance?

有没有办法来声明一个元素的CSS属性,以便它不会影响到它的任何子元素,或者有一种方法来声明一个元素的CSS来实现指定的样式,而不是inheritance父类声明的任何样式?

一个简单的例子

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:

 form div { font-size: 12px; font-weight: bold; } div.content { /* Can anything go here? */ } 

在正常情况下,人们会期望文本块“段落的内容”和“跨度的内容”都将是12px和粗体。

是否有一个属性要包含在上面的CSS中的“div.content”块中,这将阻止它inheritance“#container表单div”块中的声明,以将样式限制为“段落的内容”,并且备用“跨度的内容“包括任何其他儿童的div?

如果你想知道为什么,那么我创build了一个特殊的CSS文件,它使得我的项目中的所有表单都具有特定的感觉,并且表单下的div都inheritance了这个感觉。 没问题。 但是在我想使用Flexigrid的表单里面,但是flexigridinheritance了这个样式,它看起来没用。 如果我在表单之外使用flexigrid,并且它不会inheritance表单css,那么它看起来很棒。 否则,它看起来很糟糕。

不幸的是,你在这里运气不好。

有一个inherit来从父项复制一个特定的值给它的子元素,但是没有任何其他的属性(这将涉及到另一个select器来决定哪个样式回复)。

您将不得不手动恢复样式更改:

 div { color: green; } form div { color: red; } form div div.content { color: green; } 

如果你有权访问标记,你可以添加几个类来精确地设置你需要的样式:

 form div.sub { color: red; } form div div.content { /* remains green */ } 

编辑: CSS工作组取决于 :

 div.content { all: revert; } 

不知道,什么时候或如果这将由浏览器实施。

编辑2:截至2015年3月,所有现代浏览器,但Safari和IE / Edge已经实现了它: https : //twitter.com/LeaVerou/status/577390241763467264 (谢谢, @Lea Verou !)

编辑3: default重命名为revert

你不能自己deviseforms吗? 然后,相应地设置div。

 form { /* styles */ } 

重要的是你总是可以否决inheritance的风格:

 form { /* styles */ !important } 

CSS规则是默认inheritance的 – 因此是“级联”的名称。 要得到你想要的东西,你需要使用!important:

 form div { font-size: 12px; font-weight: bold; } div.content { // any rule you want here, followed by !important }