html - 如何在不使用“！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和pinside.text而不是 inside.sub-text您应该使用选择器>

像这样：

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

这将针对所有h2是.text.

还要检查http://www.w3schools.com/cssref/css_selectors.asp，

还有这个演示。

Answer 2

使用以下内容：

.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 {/* there is nothing inherited now */}
.sub-text span {/* there is nothing inherited now */}

所以这>意味着只有 .text 的直接子级才能获得 css ......

Answer 3

CSS 使用优先级，因此在之前的 css 之后编写的任何 css 都应该覆盖。如果没有，那就意味着你的陈述不够具体。