1.行内样式＞指定样式＞通用class样式>通用未指定CLASS样式
2.例子：
1）<div style="...">aaaaaa</a>这就是指定用style的行内样式；
2）<div id="side" >aaaaaa</div>这就是指定id使用side样式；
3）<div class="ot">aaaaaa</div>这就是指了通用的class为ot的样式；
4）如<body><table><tr><th>这些一开始样式文件就定义好全程的样式，为通用为指定的样式；
最高就是指行内样式，接着就是指定ID的，然后就是CLASS，最后就是未指定通用样式；
在仅有 (1) 和 (2) 时，(1) 生效，因为 (1) 的权值比 (2) 高；在 (1) (2) (3) 并存时，(3) 生效，因为虽然 (2)(3) 的权值一样，但 (3) 是后声明的，会覆盖 (2)。解决方法如下：
1、首先新建一个html文件，命名为test.html。
2、在test.html文件内，使用div标签创建图层1，同时设置div的class为div1，主要用于下面通过该class来设置css样式。
3、在test.html文件内，再使用div标签创建图层2，同时设置div的class为div2。
4、在css标签内，对页面的div元素进行样式统一设置，定义它们的宽度和高度都为250px。
5、在css标签内，对类名div1的div（图层1）进行样式设置，使用position设置div为相对定位，使用background设置div背景颜色为红色，使用z-index设置div层级为1。
6、最后在浏览器打开test.html文件，查看实现的效果，就完成了。
你是不是弄错了啊，，应该总是显示 pic2吧
行内式>id选择器 >class定义的样式 >标签选择器
你可以在去试一下。。。。
可以与它们放置的顺序是没有关系。。。
看了你这个问题我测试一下，，
测试的代码：
<style type="text/css">
ul li { background:url(bg2.gif) no-repeat left center}
.on { background:url(nv5.gif) no-repeat left center}
#div11 { background:url(nv8.gif) no-repeat left center}
</style>
</head>
<body>
<ul>
<li class="on" id="div11"></li>
</ul>
</body>
说明这个：id选择器 >class定义的样式 >标签选择器
当然行内式优先级最大!!
