可能重复:
如何防止CSS继承？
有没有办法声明元素的CSS属性,使其不会影响它的任何子元素,或者是否有办法声明元素的CSS只实现指定的样式,而不是继承为其父元素声明的任何样式？
一个简单的例子
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"块中,这将阻止它继承"#container form div"块中的声明,以将样式限制为"段落的内容"并且备用"跨度的内容"包括任何其他儿童div？
如果你想知道为什么,好吧,我创建了一个特定的CSS文件,它给我项目中的所有表单一个特别的感觉,并且表单下的div都继承了这种感觉.没问题.但是在我希望使用Flexigrid的形式内部,但flexigrid继承了样式,它看起来没用.如果我在表单之外使用flexigrid并且它不会继承表单css,那么它看起来很棒.否则它看起来很糟糕.
Bol*_*wyn 52
不幸的是,你在这里运气不好.
有inherit从父到其子复制一定价值,但没有物业轮的其他方式(将涉及另一个选择,以决定其恢复的风格).
您必须手动还原样式更改:
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.
你不能设计表单本身的样式吗？然后，相应地设置 div 的样式。
form
{
/* styles */
}
您始终可以通过使其重要来否决继承的样式：
form
{
/* styles */ !important
}