清除子元素的父元素css属性

Question

我有两个元素，例如：

 <div style="color: #f00">
    parent 
    <div>child</div>
 </div>

我想，那个子元素没有父CSS属性，请告诉我，怎么做呢？

Answer 1

你可以

1. 将所有孩子都放入<iframe>。父窗口的CSS不会反映在iframe中。

2. 您可以修改像http://meyerweb.com/eric/tools/css/reset/这样的CSS重置以满足您的需求（例如，根据需要为您的孩子编辑并为重置的每个部分添加前缀）。

   <div style="color: #f00">
     parent 
     <div id="children">
       <div>child</div>
     </div>
   </div>
   

（仅使用上面重置的最后一行作为示例），您可以执行类似

的操作

#children table {
  border-collapse: collapse;
  border-spacing: 0;
}

重置<table>中的#children元素。您必须根据自己的需要进行测试和调整。

Answer 2

子div将始终继承其父div的样式，这就是css的全部内容。你可以考虑这样的事情

<div class='parent'>
  parent text
    <div>
       child text
    </div>
</div>

然后在你的样式中（在你的html中，或者在链接的样式表中），你可以做这样的事情：

body, .parent div {
  color: #000;
  ...
}
.parent {
  color: #f00;
  ...
}

请注意，如果您向.parent添加更多样式，则必须为子div（.parent div）设置替代方法，以防止该属性被子项继承