zoukankan      html  css  js  c++  java
  • 深度的发现之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选择器类型与权重关系图。

  • 相关阅读:
    oracleI基础入门(6)sql语句Substring Crazy
    oracleI基础入门(7)table约束 Crazy
    oracleI基础入门(7)table视图 Crazy
    SQL附加分离数据库(命令)
    双截棍 C语言版 (超搞笑)
    AspNetPage分页(repeater),自己做的例子基本代码
    记录
    RegularExpressionValidator控件中正则表达式用法
    20 个经典的 Ajax + CSS 表格
    GridView各个事件中,怎样获取主键值
  • 原文地址:https://www.cnblogs.com/zhuyingyan/p/2694472.html
Copyright © 2011-2022 走看看