Question

我对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”，我认为这将是一个小文本，因为它有一个上层的“小”类。我怎样才能做到这一点。

请不要告诉我更改任何东西，因为我正在构建一个复杂的模板系统，你可以在容器（div）中有容器（div），我希望自下而上的样式适用！

Answer 1

您在CSS中.big p规则之后指定了.small p的规则，因此字体大小将是50像素，而不是10，因为两个选择器具有相同的特异性。

CSS自上而下地将其同等特定的选择器级联（对于CSS规则和DOM）。除非您执行以下任何操作，否则无法更改：

使一个或多个选择器更具体
使用!important
修改您的HTML

我知道你说不要暗示任何改变，但我会为了别人的利益而这样做 - 最简单的做法是实现你想要的就是在第二部分使用儿童组合>选择器（由现在删除的答案建议）：

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

级联CSS，自下而上级联

1 个答案: