博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
深度的发现之256个class打平1个id
阅读量:4314 次
发布时间:2019-06-06

本文共 1248 字,大约阅读时间需要 4 分钟。

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

  首先,我就按着他里面的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   。里面跟他的博客内容差不多,不过给出了256个div打平1个class的实例,还有webkit的那个源码和gecko的源码(发现源码真看得不大懂)。看了下面的评论还有人更疯狂的尝试opera的65536个的。

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

转载于:https://www.cnblogs.com/zhuyingyan/archive/2012/09/19/2694472.html

你可能感兴趣的文章
Spring Boot Docker 实战
查看>>
Div Vertical Menu ver3
查看>>
Git简明操作
查看>>
InnoDB为什么要使用auto_Increment
查看>>
课堂练习之买书打折最便宜
查看>>
定义函数
查看>>
网络虚拟化技术(二): TUN/TAP MACVLAN MACVTAP
查看>>
MQTT协议笔记之mqtt.io项目HTTP协议支持
查看>>
(转)jQuery中append(),prepend()与after(),before()的区别
查看>>
Tecplot: Legend和图像中 Dashed/Dash dot/Long dash 等虚线显示没有区别的问题
查看>>
蜕变成蝶~Linux设备驱动之异步通知和异步I/O
查看>>
jquery简单开始
查看>>
作业2
查看>>
ios上架报错90080,90087,90209,90125 解决办法
查看>>
给button添加UAC的小盾牌图标
查看>>
如何退出 vim
查看>>
Robberies
查看>>
get post 提交
查看>>
R安装
查看>>
JavaScript高级特性-实现继承的七种方式
查看>>