層疊CSS，自底向上級聯

我很困惑與CSS是層疊的方式，我想如果你不喜歡的東西層疊CSS，自底向上級聯

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<style type="text/css"> 
.small p { 
    color: red; 
    font-size: 10px; 
} 
.big p { 
    color: green; 
    font-size: 50px; 
} 


.blue p { 
    color: blue; 
} 
</style> 
<title>Insert title here</title> 
</head> 
<body> 
    <div class="small"> 
     <p>Small</p> 
     <div class="big"> 
      <p>Big</p> 
      <div class="small"> 
       <div class="blue"> 
        <p>Blue inside Small</p> 

       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

我的問題是「內部小藍」，我認爲這會小文字，因爲它有一個「小」類的上流班。我怎樣才能做到這一點。

請不要告訴我改變任何事情，因爲我正在構建一個複雜的模板系統，您可以在容器（div）中放置容器（div），並且我想要自下而上的樣式應用！

來源

2011-05-30 user515958

如果您打算構建「複雜的模板系統」，您應該首先了解如何在開始編寫代碼之前使用CSS。 – BoltClock 2011-05-30 15:14:05

如果你在理解Cascade時遇到困難，你應該看看這個：http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg – 2011-05-30 15:20:25

+1 @Justus。我使用的例子，我也可以:-) – andyb 2011-05-30 16:28:25

您在CSS中規定了.small p的規則之後指定.big p的規則，所以字體大小將爲50像素，而不是10，因爲這兩個選擇器具有相同的特徵。

CSS從上到下（CSS規則和DOM）級聯其同等特定的選擇器。你不能改變，除非你做這些：

進行一項或多項選擇更具體的
使用!important
修改你的HTML

我知道你說的不建議任何改變，但爲了別人的利益，我會這樣做 - 最簡單的做法是在第二個選擇器中使用子組合器>（如現在刪除的答案所示）：

.big > p { 
    color: green; 
    font-size: 50px; 
}

來源

2011-05-30 15:07:32 BoltClock

@wilmoore：您刪除的答案讓我意識到我使用'>'太多次了。我會鼓勵你，但是+10代表會因爲你刪除而丟失到recalc，但是謝謝：/ – BoltClock 2011-05-30 15:21:20

BoltClock，感謝你的回答，我正在開發GWT前臺框架，我知道CSS並不是我的強項。基本上你有皮膚的面板，我需要說這個面板內的任何文本有一個紅色的文字（與背景相反），這裏的問題是面板可以有不同的皮膚和不同的前景色的其他兒童面板。與.big> p的問題，它只會匹配第一級！這應該是一件簡單的事情。！ – user515958 2011-05-30 16:17:40

層疊CSS，自底向上級聯

回答

相關問題