级联CSS，自下而上的级联

编程问答 2022-04-26

问题描述

| 我对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>
我的问题是\“小里面的蓝色”，我认为这将是小文本，因为它具有带有“小”类的上层阶级。我该如何实现。 请不要告诉我进行任何更改，因为我正在构建一个复杂的模板系统，您可以在容器（divs）中包含容器（divs），并且我希望采用自下而上的样式！     

解决方法

        您在CSS中的“ 2”规则之后指定了“ 1”规则，因此字体大小将为50像素，而不是10像素，因为两个选择器的特异性相同。 CSS从上至下（针对CSS规则和DOM）层叠其同等选择器。除非您执行以下任何一项操作，否则您无法更改此设置： 使一个或多个选择器更具体 使用
!important
 修改您的HTML 我知道您说过不建议任何更改，但我还是会为他人谋取利益。要实现您想要的最简单的方法就是在第二个选择器中使用子组合器
>
（如现在删除的答案）： 
.big > p {
    color: green;
    font-size: 50px;
}
    
级联