层叠CSS，自下而上的层叠
层叠CSS，自下而上的层叠
提问于 2011-05-30 23:05:11
我对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>我的问题是"Blue inside Small“，我认为这将是小文本，因为它有一个带有" small”类的上层类。我如何才能做到这一点。
请不要告诉我更改任何东西，因为我正在构建一个复杂的模板系统，您可以在容器(Div)中使用容器(Div)，我希望应用自下而上的样式！
回答 1
Stack Overflow用户
发布于 2011-05-30 23:07:33
您在CSS中的.small p规则之后指定了.big p规则，因此字体大小将为50像素，而不是10，因为这两个选择器具有相同的特异性。
CSS自上而下地层叠其同样特定的选择器(对于CSS规则和DOM)。除非您执行以下任一操作，否则您无法更改此设置：
- 使用
!important - Modify HTML使一个或多个选择器更加具体
我知道你说过不要建议任何修改，但我还是会为了其他人的利益而这样做--要实现你想要的，最简单的方法是在第二个选择器中使用子组合子> (正如现在删除的答案所建议的那样)：
.big > p {
color: green;
font-size: 50px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6177928
复制相关文章
相似问题
腾讯云开发者
