CSS渲染HTML时的优先级问题

     我曾经在对一个有奇偶行隔行色的表格做一个鼠标移上去，鼠标所在行变色的效果时遇到一个奇怪的问题。

 

     我对表格用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

转载于:https://www.cnblogs.com/daoyuly/archive/2010/04/18/1714530.html