css设置上下样式覆盖的问题

html：
<div id="article">

<div id="subject">

<dl>123</dl>
</div>

<form action="">
<dl>456</dl>
</form>

</div>

#article #subject dl{

height: 100px;
line-height: 40px;
width: 100px;
background-color: red;
}
#article dl{

height: 40px;
line-height: 40px;
width: 200px;
background-color: blue;
}
以上的代码，为什么下面的样式无法覆盖上面的

#subject dl{

height: 100px;
line-height: 40px;
width: 100px;
background-color: red;
}
#article dl{

height: 40px;
line-height: 40px;
width: 200px;
background-color: blue;
}
以上的代码下面的css就会覆盖上面的？

选择器优先级问题：

#article #subject dl的优先级比#subject dl优先级高，所以无法覆盖；

#subject dl的优先级没有#article dl高，所以会覆盖；

为同一个元素设置多个样式时，此时哪个样式生效由选择器的优先级确定：

选择器的优先级（权重）：

内联样式    1000

id选择器    100

类和伪类选择器    10

元素选择器    1

统配选择器    0

继承的样式    无

当一个选择器中含有多个选择器时，需要将所有的选择器的优先级进行相加，然后再进行比较，优先级高的优先显示，选择器的计算不会超过其最大的数量级（10个id选择器的优先级

不能达到1000）

分组选择器（并集选择器）的优先级单独计算，不会相加。

样式后面加！important，该样式获取最高优先级，内联样式不能加！important属性。

样式相同的谁在下面执行谁（样式的覆盖）。