如何在不使用「！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，

這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之前應該覆蓋。如果不這樣做，那就意味着你的陳述並不夠具體。