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

Question

我有两个元素，例如：

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

我想要，那个子元素没有父 CSS 属性，请告诉我，如何做到这一点？

Answer 1

你可以

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

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

   <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以防止该属性被子级继承