Question

为什么#r3不是粉红色的？（见jsfiddle.net/aAqKf /）：

<!DOCTYPE HTML>
<html>
<head>
<style>
#r1 { width: 100px; height: 100px; border: solid 1px red; }
#r2 { width: 50px; height: 50px; border: solid 1px green; }
#r3 { width: 25px; height: 25px; border: solid 1px blue; }

.pink div {
    background: pink;
}

.red div {
    background: red;
}
</style>
</head>
<body>

<div id="r1" class="red">
    <div id="r2" class="pink">
        <div id="r3"></div>
    </div>
</div>

</body>
</html>

我希望pink班级将pink背景应用于div个孩子。它不像那样工作。为什么呢？

但是，如果我按如下方式更改CSS（jsfiddle.net/aAqKf/1 /），它会起作用：

<style>
#r1 { width: 100px; height: 100px; border: solid 1px red; }
#r2 { width: 50px; height: 50px; border: solid 1px green; }
#r3 { width: 25px; height: 25px; border: solid 1px blue; }

.red div {
    background: red;
}

.pink div {
    background: pink;
}
</style>

请帮我弄清楚它是如何运作的。此外，请不要建议我使用!important和background: pink声明，因为it will work仅until I change the HTML如下：

<div id="r1" class="pink">
    <div id="r2" class="red">
        <div id="r3"></div>
    </div>
</div>

注意：我更感兴趣的是弄清楚它为什么会这样，而不是找出如何使它按照我的方式工作。

Answer 1

规则.pink div和.red div均为specific。后一条规则优先于前者。

顺便说一下，你几乎不必使用!important。使用选择器body .pink div或div.pink div足以让选择器更加重要。

Answer 2

来自this page

为了方便起见，当两个规则具有相同的权重时，指定的最后一个规则将获胜。

在你的第一个小提琴中，红色获胜。在第二场粉红色胜利。

Answer 3

因为类继承的属性与实际元素的属性不同。

例如，如果您更改了

.pink div { background: pink; }

为：

#r2 div { background: pink; }

它可以按预期工作，因为嵌套的块级元素基于其最接近的父级继承。

另一方面，类具有更宽松的继承性，并且基于父项会覆盖属性，除非另外特别说明使用！important，当两个选择器具有相同的权重时。

为了进一步证明这一点，将.pink div更改为div.pink div也会显示正确的效果，因为CSS又指的是元素而不是类选择器。

无法弄清楚为什么CSS会像这样工作

3 个答案: