CSS以防止子元素继承父样式[重复]答案

【问题标题】：CSS to prevent child element from inheriting parent styles [duplicate]CSS以防止子元素继承父样式[重复]
【发布时间】：2011-07-02 02:37:49
【问题描述】：

可能重复：
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 和粗体。

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

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

【问题讨论】：

很遗憾不能再回答了；但这将有助于解决您的问题：css-tricks.com/child-and-sibling-selectors
还要查看'initial'值，很多情况都会这样解决，例如--display:initial;

标签： css

【解决方案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。

【讨论】：

+1 在我看来，这是解决问题的唯一方法。
事实上，现在仅仅过了6个月。我在三月份编辑了答案。 ;-)
关于 css all 属性；根据 caniuse.com Safari 和 IE 都不支持它； caniuse.com/#feat=css-all
@TetraDev 问题是，是初始值，这里的规范是明确的：Each property has an initial value, defined in the property’s definition table.。碰巧的是，display 的初始值为inline。如果选择器指向div 或table 或span，这完全不重要。正如我上面所说：这很不直观。
现在全部：未设置

【解决方案2】：

默认情况下继承 CSS 规则 - 因此是“级联”名称。要得到你想要的，你需要使用 !important:

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

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

【讨论】：

咳咳，!important?那是用大锤敲碎坚果。好的 ol' form div.content 选择器变成了什么？
其实你是对的。他可以使用 div.content 表单，因为无论如何这都会覆盖继承的样式。 +1

【解决方案3】：

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

form
{
    /* styles */
}

你总是可以通过使继承的样式变得重要来推翻继承的样式：

form
{
    /* styles */ !important
}

【讨论】：

!important 应尽可能避免