hover失效的一个和权重有关的原因

下面我们先来看一个代码：

这串代码很明显，当鼠标放在这个50*50的方块上时，方块的颜色会由白杏色变成黑色。此时不管是把css中的div和div:hover如何放置，结果都不会变。
那么请在来看看这个：

此时的hover效果却消失了

然而把div:hover和div.box换一下位置便会使重新达到原来的目的，那么为什么会这样呢？
这就关系到了权重的问题了。
标签选择器的权重值为1
class选择器和伪类的权重值都为10
写在同一行的选择器的权重值要全部相加起来比较
此时div:hover和div.box的权重值都为11，所以后一个的样式会覆盖在前一个上，因此导致了hover失效。
（其实一般情况下我们新手很少选择去用交集选择器（既上文中的div.box），大多用父子选择器或直接用class选择）