#wp{border:1px solid #ccc;}

#wp.edit{border:1px solid #000;}

#wp.over{border:1px solid #ff6600; }

<div id=”wp”>test</div>

#wp{border:1px solid #ccc;}

#wp.edit{border:1px solid #000;}

#wp.over{border:1px solid #ff6600; }

<div id=”wp” class=”over edit”>test</div>

来看看上面的代码，当然这个我没有按照html标准的方式去写了，而是直接将css和html直接贴出来了,可以看到我有一个id名为wp的盒子， 我在上面挂了over和edit两个class。

在css中，我使用的是css选择器的这一种方式，哈哈，我也不知道这种方式具体的名称怎么说.（如果你对css选择器有兴趣，请看这里：http://www.w3.org/TR/CSS2/selector.html）

这时候你来猜猜，在页面中，他的边框应该是什么颜色的？

哈，你猜对了：ff6600。

但是这时候千万别高兴，ie6下去看看。怎么是黑色的呢？

原因是这样的，当然我说的原因是从我的角度去理解的，并不是官方权威的：

1、ie6在解析css的时候，是根据html中，class的值的顺序来决定的，他会选择class最后一个的值，比如在这里，他就选择了 edit的值；（注：这里的box是有id的，而且是通过的#id.class的方式，如果是直接.class{},.class1{}这种形式，解析并 非如何）

2、而在ie6以外的浏览器（与标准更接近的）而是按照css文件中的class从上向下的顺序来解析的；

因为必竟这里是css嘛，所以应该去尊重css文件，所以标准是这样去解析的。

所以请各位一定要注意了。当然我还是不太建议这种方式去写，因为我还是习惯了.class1,.class2这种方式，不知道你能不能看明白我的意 思。

在此我在附上一个我对W3C中，对CSS对这种优先级的定义的一点东西吧：

1、w3c对css的优先级定义了a，b，c，d这四个值；

2、style代表a,id代表b，class是c，html标签及他的伪类是d；

3、如果出现了style，那么a=1，这样一来，他就是最高的权限了（a=1，b=0，c=0，d=0）（1，0，0，0）

4、如果在id中出现了，就是a=0，b=1，c=0，d=0

5、如果是class，那这样就会根据class出现的次数，来决定c的值，所以c的值可能是1，2，3，4…

6、标签，及伪类也有可能出现多次，所以他决定了d的值，也是1，2，3，4….

最后你通过

a-d的值来决定他的优先级，不知道你是否明白！

谢谢！

在次把W3C的例子给大家可以看看：

 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

同时附上W3C文档的地址：http://www.w3.org/TR/CSS2/cascade.html#specificity

如果我写的这个，你发现有什么问题，或者有什么意见，请及时与我联系，可以通过在页面中查找我的联系方式，也可以在评论中留言，谢谢！