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

I don't know if it's possible, but does anyone know how can I ignore all the inherited CSS styles in a new class without using !important for each one?

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

My HTML code:

我的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}

3 个解决方案

#1

If you only want to target the span, h2 and p within .text and not within .sub-text you should use the selector >

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

Like this:

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

That will target all h2 that are a direct child of .text.

这将针对所有h2,它们是.text的直接子项。

Also check http://www.w3schools.com/cssref/css_selectors.asp,

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

And this demo.

而这个演示。

#2

use the following:

使用以下内容:

.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 */}

So the > means that only direct children of .text get the css...

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

#3

CSS uses precedence, so any css written after the before css should overwrite. If it doesn't then that means you aren't being specific enough with your statements.

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

#1