一个小问题引出的有关CSS优先级的思考

　　随着B/S程序越来越普及，浏览器的种类越来越多，Web程序员也越来越关注如何使自己的页面代码更规范的问题了。然而，任何事情一旦成了标准，便往往会很严格，有时候甚至有些僵化，不管怎样，都给我们广大的程序员同志提出了更高的要求。
　　这不，这几天我就遇到了一个问题，有关javascript和css的，具体情况描述如下。

// 样式：
< styletype = " text/css " >
.mouseover{background - image:url(pic / 200707 / dot.jpg);}
.mouseout{background - image:url(pic / 200707 / tagon2.jpg);}
</ style >
// 脚本：
< divstyle = " BACKGROUND-IMAGE:url(Pic/200707/tagon2.jpg);WIDTH:100px;HEIGHT:30px " onmouseover = " this.className='mouseover' " onmouseout = " this.className='mouseout' " ></ div >

　　
　　我的本意是想当鼠标移到目标上方时更换图片，移出时再恢复显示为原来的图片，然而，死活也出不来效果。我是百思不得其解，只好将问题发到社区（ http://community.youkuaiyun.com/Expert/topic/5690/5690720.xml?temp=.3733484）。很快，就有网友回复，其中一位网友的回复真是一语点醒梦中人啊！他说可能是css的优先级造成的。于是，将定义在div中的style移到外面，然后用class来指名其应用的样式，果然，问题迎刃而解。
　　这是改正后的代码：

< styletype = " text/css " >
.mylink{BACKGROUND - IMAGE:url(Pic / 200707 / tagon2.jpg);WIDTH:100px;HEIGHT:30px;}
.mouseover{background - image:url(pic / 200707 / dot.jpg);WIDTH:100px;HEIGHT:30px;}
.mouseout{background - image:url(pic / 200707 / tagon2.jpg);WIDTH:100px;HEIGHT:30px;}
</ style >
< divclass = " mylink " onmouseover = " this.className='mouseover' " onmouseout = " this.className='mouseout' " ></ div >

　　大家都知道，多种样式表单可以被用于同一个文档中，依照重要性不同而分级。如果在同一个html标记中定义了有冲突的样式，那么最靠近标记的定义将生效。所以，在改正前的代码中，我直接在div中定义的style就具有最高的级别，因此，无论我通过javascript如何来改变class，都不会生效。在改正后的代码中，我把其样式也定义在类中，这样就和javascript要控件的类就是一个级别的了，这样就不会再出现冲突，效果就出来了。当然，为了说明问题，我专门定义了mylink类，其实，实际使用中直接应用mouseout类就行了。
　　很多情况下，困扰我们的一些难题往往都是一些“小问题”造成的，当你忽然间发现，会有一种豁然开朗的感觉，这种感觉真的挺好。