深度的发现之256个class打平1个id

　　其实这个发现来自于张鑫旭的博客呢，有趣：256个class选择器可以干掉1个id选择器http://www.zhangxinxu.com/wordpress/2012/08/256-class-selector-beat-id-selector/ 。我也从他的博客学到很多东西，然而学习当然不能看了觉得知道就行，更多的时候也要去自己实践一下。

　　首先，我就按着他里面的demo写了一个256个class和1个id的例子，然而确实如他所说的那样显示的css是256个class那个样式，然而当我多手将写id的那个css样式放到那256个class的样式下面，结果却是id的那个样式，我心里面就万分奇怪了，不是说256个class选择器可以干掉1个id选择器吗？一开始满是疑惑，接着就去看圣杯布局去。最后，突然脑筋一动，难道不是干掉而是打平？如果打平的话，那样就是顺序决定了。为验证这个假设，我再加多一个class上去，那样就257个class，然后我再把id的样式放在那些class下面，果然显示的257个class的样式。所以题目我取了打平。

　　那么为什么会这样的呢？张鑫旭的博客也给出了答案了。firefox，chrome，IE“所有的类名(classes)都是以8字节字符串存储的。对字节稍稍了解的人都知道，8字节所能hold的最大值就是255. 所以你想啊，当同时出现256个class, 势必会越过其边缘，溢出到id区域。”，而opera是以16字节的字符串存储的。好奇心又来了，我在想既然256class=1id,那么256tag不也等于1class么？带着这个疑问我去弄了256个div嵌套和1个class，但是当我用firefox15看的时候，什么效果都没有，两个都不起作用（我想会不会是firefox不解析256个div的嵌套，这个可能要看过他的渲染引擎才行，看一些人的评论好像是Wierdly enough nothing renders in firefox at all when you get pass 200 levels in the dom tree），用chrome看的时候就有东西，果然如此。

      而我今日去逛了下久违的青蛙网（发现页面改了，青蛙没了，呜呜），发现一篇差不多的文章Extreme specificity overriding a CSS ID with 256 chained Classes   http://www.thecssninja.com/css/extreme-specificity 。里面跟他的博客内容差不多，不过给出了256个div打平1个class的实例，还有webkit的那个源码和gecko的源码（发现源码真看得不大懂）。看了下面的评论还有人更疯狂的尝试opera的65536个的。

　　其实没有人写如此的class，我个人认为，但是发现也给我这个菜鸟一个提醒就是：我一直在入门书本《css实战》中的css权重值公式并不正确，其实书本也只是说适用，真正的权重值计算还需看w3的，http://www.w3.org/TR/CSS21/cascade.html#specificity。而外国人也很形象的制作了一个CSS选择器类型与权重关系图。