深度的发现之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选择器类型与权重关系图。