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

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

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

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

<style type="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>
<div class="mylink" onmouseover="this.className='mouseover'" onmouseout="this.className='mouseout'"></div>

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