选择器的CSS优先级

我对css样式的替换优先级有点困惑。
我有以下示例代码：

<style>
#list div {
    background-color: #999;
}

#d2 {
    background-color: #fff;
    color:red;
}
</style>
<div id="list">
    <div>item 1</div>
    <div id="d2">item 2</div>
    <div>item 3</div>
    <div>item 4</div>
    <div>item 5</div>
</div>

#名单组{
背景色：#999；
}
#d2{
背景色：#fff；
颜色：红色；
}
项目1
项目2
项目3
项目4
项目5

我的问题是，为什么第二个

背景色：#fff#d2

类中的code>对子div没有影响？或者最好问问：为什么第一条规则会赢
我希望第二条规则会改变div的背景颜色

有人能解释这种情况吗？

\list div

比

\d2

更具特异性-前者是一个ID+元素，后者只是一个ID。因此，

#d2

中明确定义在

#list div

中的任何样式都将被后一个选择器覆盖

div#d2

的特异性与

#list div

相同，

#list#d2

的特异性更高

特异性层次结构的顺序是

！重要信息

样式、内联样式、ID、类，然后是元素。Psuedoclasses和psuedoelements具有真实类或元素的特殊性。层次结构中的每个步骤都会覆盖其下的所有步骤，因此其中包含10个类的选择器仍将被单个ID的选择器覆盖

CSS选择器专用性是这个分层概念的名称。有关更多信息，请参阅以下资源：

#list div

比

#d2

具有更高的特异性-前者是一个ID+元素，后者只是一个ID。因此

#d2

中明确定义的任何样式都将被后一个选择器覆盖

div#d2

的特异性与

#list div

相同，

#list#d2

的特异性更高

特异性层次结构的顺序是

！重要信息

样式、内联样式、ID、类，然后是元素。Psuedoclasses和psuedoelements具有真实类或元素的特殊性。层次结构中的每个步骤都会覆盖其下的所有步骤，因此其中包含10个类的选择器仍将被单个ID的选择器覆盖

CSS选择器专用性是这个分层概念的名称。有关更多信息，请参阅以下资源：

---

特异性是根据规则中id、类别和标记选择器的数量计算的。Id具有最高的特异性，然后是类，然后是标记。您的第一条规则现在比第二条规则更为具体，因为它们都有一个id选择器，但第一条规则也有一个标记选择器。具体程度是根据规则中id、类和标记选择器的数量计算的。Id具有最高的特异性，然后是类，然后是标记。您的第一条规则现在比第二条规则更为具体，因为它们都有一个id选择器，但第一条规则也有一个标记选择器，因为

要解决此问题，您需要一个更具体的选择器：

#list div {
    background-color: #999;
}

#d2 /*not specific enough*/,
div#d2 /*more specific - specific enough*/, 
#list #d2/* even more specific*/ { 
    background-color: #ffffff;
    color:red;
}

因为

要解决此问题，您需要一个更具体的选择器：

#list div {
    background-color: #999;
}

#d2 /*not specific enough*/,
div#d2 /*more specific - specific enough*/, 
#list #d2/* even more specific*/ { 
    background-color: #ffffff;
    color:red;
}

---

优先级是：内联css>id>class>element。如果你有这个

div {
    background-color: #999;
}

#d2 {
    background-color: #fff;
    color:red;
}

然后#d2赢得了战斗，但在这里：

#list div {
    background-color: #999;
}

#d2 {
    background-color: #fff;
    color:red;
}

---

“#list div”获胜，因为“#list div”选择器作为一个组合比元素“#d2”更强大。

优先级是：内联css>id>class>element。如果你有这个

div {
    background-color: #999;
}

#d2 {
    background-color: #fff;
    color:red;
}

然后#d2赢得了战斗，但在这里：

#list div {
    background-color: #999;
}

#d2 {
    background-color: #fff;
    color:red;
}

---

“#list div”之所以获胜，是因为“#list div”选择器作为一个组合比元素“#d2”更强大。

将选择更改为“#list#d2”？@NicholasV。谢谢你的主意。但我的问题是为什么它会这样。干杯，看起来下面的答案就是这样：）我宁愿问你为什么期望第二条规则获胜。。。（内部回答）：）将选择更改为“#列表#d2”？@NicholasV。谢谢你的主意。但我的问题是为什么它会这样。干杯，看起来下面的答案就是这样：）我宁愿问你为什么期望第二条规则获胜。。。（里面回答）：）