CSS优先级问题

今天遇到一个较为奇怪的css选择器问题，主要是利用两个伪类选择器进行表格样式的设置。
下面的代码我是开始的，按照一般思路，自然是希望鼠标指向的优先级最高，起初我没有用important。加上important后下面的两行代码生效了，但是上面的两行依然不正确。
由于本身就不太懂CSS的优先级于是逐一尝试，尝试在tr:hover前面加上table也均不见效。

#content tr:hover{color:#00f !important}
#content td:nth-of-type(even){color: #111;}

#content td:hover{background:#CADBEC !important}
#content tr:nth-of-type(odd) td { background: #f2f7fc; }

正准备去掉这个效果时，然后发一个stack overflow，或者报Chrome的bug。然而测试发现IE 11和Firefox也是同样的效果，于是这显然是某种标准了，即使错误，也应该是一种CSS标准意义的了。仔细观察发现重点了，之前都一直在想color和background的表现怎么不一样，而忽略了tr后面自然接了一个td，于是找到了问题的关键。加了一个td之后一切就如所需要的了，鼠标指向优先级最高(当然不能高过内嵌的)。
正确代码如下，虽然尝试出来不过比较费解的是td td这种是不是嵌套表格的事儿！不管它了，有空再研究下CSS的四维优先级。

#content tr:hover{color:#00f !important}
#content td:nth-of-type(even) td{color: #111;}

#content td:hover{background:#CADBEC !important}
#content tr:nth-of-type(odd) td { background: #f2f7fc; }