• 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

  • 相关阅读:
    洛谷 P2800 又上锁妖塔
    Struts2框架学习(一)
    spring框架学习(六)AOP
    spring框架学习(五)注解
    spring框架学习(四)自动装配
    spring框架学习(三)junit单元测试
    spring框架学习(二)依赖注入
    spring框架学习(一)
    Eclipse在线安装SVN
    使用Maven搭建Struts2+Spring3+Hibernate4的整合开发环境
  • 原文地址:https://www.cnblogs.com/daoyuly/p/1714530.html
Copyright © 2020-2023  润新知