如何防止父节点的任何css样式继承到子节点？答案

【问题标题】：How to prevent inheritance of any css style of parent node to child node?如何防止父节点的任何css样式继承到子节点？
【发布时间】：2014-11-27 10:27:09
【问题描述】：

假设一个 body 节点有一个子节点（例如 div）。

可能有一些 css 样式附加到正文中，这些样式是事先不知道的（它们特定于 WWW 上可访问的任意页面）。

子节点（例如 div）有一堆静态的 css 样式。

如何防止父级的 CSS 样式“影响”子级的样式？

【问题讨论】：

诸如宽度、字体大小、通用位置、字体系列和颜色之类的东西都是基于父元素的……通常最好尝试在父元素中覆盖你的常量样式，然后再更多具有类或 id 的特定类取决于您想要的具体程度...这就是您覆盖的方式...
这重复了Prevent CSS Inheritance，这是问题的一般情况。

标签： html css

【解决方案1】：

没有通用的方法。您需要为每个以inherit 作为默认值的属性设置一个值（inherit 除外）。

即使这样也不会阻止所有影响。

例如

 body { width: 300px; }
 div  { width: auto;  }

div的宽度受body的宽度影响。

【讨论】：

不是默认继承某些css属性（根本没有将属性设置为“继承”孩子）？
@Scholle — 是的。我为什么还要说在这个答案中为这些属性设置不同的值？
@Scholle：没错。您必须逐案处理。没有防弹的方法。一些 CSS 样式是继承的。其他的，尽管您可以指定相同的样式，但由于 CSS 选择器优先级而覆盖您的样式。
继承的 CSS 属性列表。 Link 和 answer on SO.
@Mr_Green — 怀疑所有新的 CSS 3 属性。

【解决方案2】：

您可以使用值initial（兼容性：IE 根本不支持）和unset（仅限 Fx27+）

initial CSS 关键字将属性的初始值应用于元素。每个 CSS 属性都允许使用它，并导致指定它的元素使用该属性的初始值。

其中初始值表示：

每个CSS属性的定义总结中给出的初始值对于继承的和非继承的属性有不同的含义。

对于继承的属性，初始值仅用于根元素，当没有为元素指定值时。

对于非继承属性，当没有为元素指定值时，对任何元素都使用初始值。

链接和引用的来源：MDN

【讨论】：

【解决方案3】：

您可以像这样在子 div 中将所有属性重置为所需的默认值。

div *{
    property1:default;
    ....
    propertyx:deafult;
}

【讨论】：