有趣：256个class选择器可以干掉1个id选择器

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=2552

我们应该都知道，从选择器得分权重上将，id选择器(#aaa{})和class选择器(.aaa{})完全不是一个数量级的，前者:1-0-0; 而后者为0-1-0.
因此：

有趣吧~~

其他说明：
1. 因为test元素是不存在的，因此，为了兼容IE6~8浏览器，需要在头部写上额外的一行JS代码：document.createElement("test");
2. 类似的，连续256个嵌套标签的权重也会比1个class的权重大。

据说，查看FireFox浏览器的源代码，发现，所有的类名(classes)都是以8字节字符串存储的。对字节稍稍了解的人都知道，8字节所能hold的最大值就是255. 所以你想啊，当同时出现256个class, 势必会越过其边缘，溢出到id区域。

Gecko overflows the count of classes into the count of IDs, each of which holds 8 bits.

— Cameron McCormack (@heycam) August 16, 2012

根据一个Opera员工的信息，Opera浏览器class类名的存储是以16字节的字符串。因此，该浏览器要想发生class溢出到id的话，需要连续65536个class. 也不知道是不是因为16字节字符串比8自己的更影响选择器引擎~~

yes, opera uses 16 bits instead of 8. bring on 65536 classes…

— patrick h. lauke (@patrick_h_lauke) August 16, 2012

可能不少CSSer本来就对选择器之前的权重关系拎不清，当下，各种CSS3伪类像情人节的礼物一样，纷至沓来，更迷糊了。

为了拯救我们这些劳苦命的的页面仔们，国外有人制作了一个很通俗易懂的，大鱼吃小鱼，小鱼吃小虾，小虾吃泥巴的CSS选择器类型与权重关系图。下面是50%压缩后的图片，很好懂的哦，快快收藏吧~~

参考文章：http://cssn.in/ja/043

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2552

（本篇完）如果您觉得本文的内容对您的学习有所帮助：