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内，则应使用选择器{{1} }

像这样：

这会定位.text > h2 { font-size: 20px; }的直接子项的所有h2。

同时检查http://www.w3schools.com/cssref/css_selectors.asp，

此demo 。

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都应该覆盖。如果它没有那么这意味着你对你的陈述不够具体。

如何在不使用“！important”的情况下忽略继承的样式？

3 个答案: