如何在不使用"!important"的情况下忽略继承的样式？

Question

我不知道是否可能,但是有谁知道如何在不使用!important每个类的情况下忽略新类中所有继承的CSS样式？

我的HTML代码:

<div class="text">
   <h2>Title</h2>
   <span>Date</span>
   <p>Text here...</p>
   <div class="sub-text">
      <p>More text!</p>
      <span>Thanks!</span>
   </div>
</div>

CSS:

.text {width:100%; float:left;}
.text h2 {font-size: 20px;}
.text span {font-size: 12px; font-style: italic;}
.text p {font-size: 12px;}

.sub-text {width: 100%; float: left;}
.sub-text p {I want to ignore all inherit class without use !important}
.sub-text span {I want to ignore all inherit class without use !important}

Answer 1

如果你只想要定位span,h2而你p内部.text而不是.sub-text你应该使用选择器>

像这样:

.text > h2 { font-size: 20px; }

这将针对所有h2直接的孩子.text.

另请查看http://www.w3schools.com/cssref/css_selectors.asp,

而这个演示.