层叠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，自底向上级联

回答

相关问题