我曾经在对一个有奇偶行隔行色的表格做一个鼠标移上去,鼠标所在行变色的效果时遇到一个奇怪的问题。
我对表格用css做了奇偶行隔行色,我发现当我用 .table tr:hover 去设置鼠标所在行显示背景色时,奇数行始终不出现这个效果,而偶数行却正常显示。这个问题比较怪异,因为我不知道问题到底是什么原因导致了这种奇怪的现象,但是我可以确信,我的整个对table上的css设置存在问题。奇数行和偶数行只是一个背景色的不同,为什么导致了鼠标移到该行却不按照我设置的css渲染呢?我由此推断问题出在了奇数行和偶数行上的css的设置上。我检查了css代码,我发现在对奇数行的设置上用.table.odd td 设置奇数行的背景色,用.table.even设置奇数行的背景色。出现这个问题的原因很可能是由.table.odd td造成的,于是我改用 .table.odd来设置奇数行背景色,测试发现原来的问题解决,鼠标移动上去,奇数行和偶数行都有背景色。
很明显,这个问题是由css优先级设置产生的。对于奇数行中的单元格tr的应用设置 .table.odd根据css权重比较法计算,应用在奇数行上的css选择符去权重是10+10=20,而.table tr:hover应用于奇数行的权重是10+1+10=21,.table tr:hover优先于.table.odd。
注:以上问题测试的浏览器为IE8