css - css中的级联规则问题

Question

<style>
div#b {
background-color:blue;

}
#b {
background-color:red;

}
</style>

<div id='a'> div a
    <div id='b'>
    div b
    </div>
</div>

我对这种风格和这种 html 有两个问题。为什么 div b 需要蓝色。我想知道级联规则，我可以在哪里了解更多信息？我的第二个问题是我应该如何使用 css 使 div b 出现在 div a 中？

Answer 1

CSS 选择器根据特异性工作。更具体的选择器意味着该选择器中定义的规则将被使用以支持不太具体的选择器。

一般来说:

• div、img等元素选择器的权重为1
• 类选择器(例如 .myClass)的权重为 10
• id 选择器，例如#myId，权重为 100

由此您可以很容易地确定上述失败的原因。

div#b = 101
#b = 100

101 > 100