Question

可能重复：
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? */
}

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

是否有一个属性包含在上面的CSS中的“div.content”块中，这将阻止它继承“#container form div”块中的声明，以将样式限制为“段落的内容”和备用“跨度的内容”，包括任何其他儿童div？

如果你想知道为什么，好吧，我创建了一个特定的CSS文件，它给我项目中的所有表单一个特别的感觉，并且表单下的div都继承了这种感觉。没问题。但是在我希望使用Flexigrid的形式内部，但flexigrid继承了样式，它看起来没用。如果我在表单之外使用flexigrid并且它不会继承表单css，那么它看起来很棒。否则它看起来很糟糕。

Answer 1

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

有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;
}

不知道，何时或是否会由浏览器实施。

编辑2 ：截至2015年3月，除了Safari和IE / Edge之外，所有现代浏览器都实现了它：https://twitter.com/LeaVerou/status/577390241763467264（谢谢，@Lea Verou！）

修改3： default已重命名为revert。

Answer 2

你不能自己设计表格吗？然后，相应地设置div的样式。

form
{
    /* styles */
}

您可以通过使重要内容重写继承样式：

form
{
    /* styles */ !important
}

Answer 3

CSS规则默认继承 - 因此是“级联”名称。为了得到你想要的东西，你需要使用！重要的是：

form div
{
    font-size: 12px;
    font-weight: bold;
}

div.content
{
    // any rule you want here, followed by !important
}

CSS以防止子元素继承父样式

3 个答案: