Question

HTML：

<div id="div_id"><div class="div_class"><p>test</p> </div>
    <div class="two"> <p>asd</p></div>    
</div>

CSS：

#div_id p {
  color:red;
  background-color: green;
  width: 100px;
}

.two p {
  // here reset all
}

实例：http://jsfiddle.net/Wwh2C/1/

<p>asd</p>看起来一样。如何在.two p中重置所有内容？我必须重复color，background-color和width？我希望在不使用!important的情况下重置所有内容，而不使用{{1}}。

Answer 1

#div_id p正在选择any p that appears below #div_id而.two p正在选择any p that appears below .two。制定第一条规则：

#div_id > div > p

仅针对第一个p进行特定目标。这样，您就不需要重置任何其他内容。

Answer 2

嗯，为什么不:(？）

#div_id .div_class p{
  color:red;
  background-color: green;
  width: 100px;
}

#div_id .two p{
/*whatever you like, not concerned by previous statement*/
}

Answer 3

Demo

出于某种原因，它不喜欢在css声明中放弃#div_id，但添加它有效。

#div_id p {
  color:red;
  background-color: green;
  width: 100px;
}

#div_id .two p {
  color:inherit;
  background-color: inherit;
  width:auto;
}

在没有覆盖的情况下重置css而没有！重要

3 个答案:

Demo