防止子元素继承父样式的CSS
可能重复：
How do I prevent CSS inheritance?
有没有办法声明一个元素的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? */
}在正常情况下，预计文本块"Content of the paragraph“和"Content of the span”都是12px的粗体。
是否有一个属性可以包含在上面的"div.content“块中，以防止它继承"#container form div”块中的声明，从而将样式限制为“段落的内容”，而保留“跨度的内容”，包括任何其他子div？
如果你想知道为什么，那么，我创建了一个特殊的CSS文件，它给我的项目中的所有窗体带来了特殊的感觉，而窗体下的div元素都继承了这种感觉。没问题。但是在表单中，我想使用Flexigrid，但是flexigrid继承了样式，它看起来就是没用。如果我在表单之外使用flexigrid，这样它就不会继承表单css，那么它看起来很棒。否则它只会看起来很糟糕。
回答 3
Stack Overflow用户
发布于 2011-02-22 23:53:53
不幸的是，你在这里不走运。
存在将某个值从父级复制到其子级的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编辑：工作组是up to something
div.content {
all: revert;
}不知道什么时候或者什么时候浏览器会实现这个功能。
SafariEdit2：截至2015年3月，除了和IE/Edge之外，所有现代浏览器都实现了它：https://twitter.com/LeaVerou/status/577390241763467264 (感谢@Lea Verou!)
编辑3: default已重命名为revert。
Stack Overflow用户
发布于 2011-02-22 23:52:01
你不能自己设计表单的样式吗？然后，相应地设置div的样式。
form
{
/* styles */
}您总是可以通过使继承样式变得重要来覆盖它：
form
{
/* styles */ !important
}Stack Overflow用户
发布于 2011-02-22 23:55:44
CSS规则默认情况下是继承的-因此有了“层叠”的名称。为了得到你想要的，你需要使用！重要的：
form div
{
font-size: 12px;
font-weight: bold;
}
div.content
{
// any rule you want here, followed by !important
}https://stackoverflow.com/questions/5080365
复制相似问题