有趣:256个class选择器可以干掉1个id选择器——张鑫旭_weixin_30449453的博客-程序员宝宝

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

#id { color:darkblue; }
.class { color: darkred; }


<span id="id" class="class">颜色是?</span>

则显然:颜色是: darkblue

有趣的现象

我突然想起了在微博上看到的一个视频:日本蜜蜂团团围住并热死大黄蜂的那个视频,——虽然小蜜蜂战斗力就是个渣渣,但是,足够多的数量也会搞出一些有趣的现象——热死足以以一敌千的大黄蜂。

但是,在CSS的世界里,居然有类似的“以数量取胜”有趣现象。比方说,这里要展示的:256个级联class选择器 击败 1个id选择器的有趣故事。

测试代码如下,先是CSS部分:

#id {
  background: darkblue;
}

.c000.c001.c002.c003.c004.c005.c006.c007.c008.c009.c010.c011.c012.c013.c014.c015.c016.c017.c018.c019.c020.c021.c022.c023.c024.c025.c026.c027.c028.c029.c030.c031.c032.c033.c034.c035.c036.c037.c038.c039.c040.c041.c042.c043.c044.c045.c046.c047.c048.c049.c050.c051.c052.c053.c054.c055.c056.c057.c058.c059.c060.c061.c062.c063.c064.c065.c066.c067.c068.c069.c070.c071.c072.c073.c074.c075.c076.c077.c078.c079.c080.c081.c082.c083.c084.c085.c086.c087.c088.c089.c090.c091.c092.c093.c094.c095.c096.c097.c098.c099.c100.c101.c102.c103.c104.c105.c106.c107.c108.c109.c110.c111.c112.c113.c114.c115.c116.c117.c118.c119.c120.c121.c122.c123.c124.c125.c126.c127.c128.c129.c130.c131.c132.c133.c134.c135.c136.c137.c138.c139.c140.c141.c142.c143.c144.c145.c146.c147.c148.c149.c150.c151.c152.c153.c154.c155.c156.c157.c158.c159.c160.c161.c162.c163.c164.c165.c166.c167.c168.c169.c170.c171.c172.c173.c174.c175.c176.c177.c178.c179.c180.c181.c182.c183.c184.c185.c186.c187.c188.c189.c190.c191.c192.c193.c194.c195.c196.c197.c198.c199.c200.c201.c202.c203.c204.c205.c206.c207.c208.c209.c210.c211.c212.c213.c214.c215.c216.c217.c218.c219.c220.c221.c222.c223.c224.c225.c226.c227.c228.c229.c230.c231.c232.c233.c234.c235.c236.c237.c238.c239.c240.c241.c242.c243.c244.c245.c246.c247.c248.c249.c250.c251.c252.c253.c254.c255 {
  background: darkred;
}

test {
  display: block;
  height: 100px;
  width: 100px
}​

然后HTML部分:

<test id="id" class="c000 c001 c002 c003 c004 c005 c006 c007 c008 c009 c010 c011 c012 c013 c014 c015 c016 c017 c018 c019 c020 c021 c022 c023 c024 c025 c026 c027 c028 c029 c030 c031 c032 c033 c034 c035 c036 c037 c038 c039 c040 c041 c042 c043 c044 c045 c046 c047 c048 c049 c050 c051 c052 c053 c054 c055 c056 c057 c058 c059 c060 c061 c062 c063 c064 c065 c066 c067 c068 c069 c070 c071 c072 c073 c074 c075 c076 c077 c078 c079 c080 c081 c082 c083 c084 c085 c086 c087 c088 c089 c090 c091 c092 c093 c094 c095 c096 c097 c098 c099 c100 c101 c102 c103 c104 c105 c106 c107 c108 c109 c110 c111 c112 c113 c114 c115 c116 c117 c118 c119 c120 c121 c122 c123 c124 c125 c126 c127 c128 c129 c130 c131 c132 c133 c134 c135 c136 c137 c138 c139 c140 c141 c142 c143 c144 c145 c146 c147 c148 c149 c150 c151 c152 c153 c154 c155 c156 c157 c158 c159 c160 c161 c162 c163 c164 c165 c166 c167 c168 c169 c170 c171 c172 c173 c174 c175 c176 c177 c178 c179 c180 c181 c182 c183 c184 c185 c186 c187 c188 c189 c190 c191 c192 c193 c194 c195 c196 c197 c198 c199 c200 c201 c202 c203 c204 c205 c206 c207 c208 c209 c210 c211 c212 c213 c214 c215 c216 c217 c218 c219 c220 c221 c222 c223 c224 c225 c226 c227 c228 c229 c230 c231 c232 c233 c234 c235 c236 c237 c238 c239 c240 c241 c242 c243 c244 c245 c246 c247 c248 c249 c250 c251 c252 c253 c254 c255"></test>​

按照我们常会的认识,id选择要比class选择高一个等级,因此,上面元素的背景色应该是#id对应的darkblue深蓝色。但是呢,上面的结果不是深蓝色,而是darkred深红色。

不信?您可以狠狠地点击这里:256个class打败1个id demo页面

无论是IE, Mozilla或WebKit浏览器,都是下图所示的结果:
256个class击败1个id效果截图 张鑫旭-鑫空间-鑫生活

有趣吧~~

补充于2015-03-21
根据评论中“深蓝”的反馈,chrome 已经没有此现象。

其他说明:
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员工的信息,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%压缩后的图片,很好懂的哦,快快收藏吧~~

图片示意CSS不同选择器与其权重之间关系 张鑫旭-鑫空间-鑫生活

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

转载于:https://www.cnblogs.com/yangyang63963/p/5857967.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_30449453/article/details/99758791

智能推荐

C++ vector的用法小结_adrianna_xy的博客-程序员宝宝

这篇文章主要介绍了c++中,vector是一个十分有用的容器,下面对这个容器做一下总结c++ vector用法C++内置的数组支持容器的机制,但是它不支持容器抽象的语义。要解决此问题我们自己实现这样的类。在标准C++中,用容器向量(vector)实现。容器向量也是一个类模板。标准库vector类型使用需要的头文件:#include 。vector 是一个类模

C++数组相关的知识点梳理_缘不可强求的博客-程序员宝宝_c++数组的知识点

最近将C++中的知识点整理了下,后续还会有其他的知识点更新。数组可以先声明再赋值,也可以再声明时对该数组进行赋值。数组是一种数据格式,能够存储多个同类型的值。数组的声明应指出以下三点:●存储在每个元素中的值的类型●数组名●数组中的元素的个数声明数组的通用格式如下:typeName arrayName[arraySize]; //typeName 数组要存储的元素的类型//ar...

Ext.XTemplate 模板_dahuzix的博客-程序员宝宝

本篇将涉及到ExtJs中一个重要的概念,模板。话说Razor很神奇,但是我个人不是很喜欢那种html混编C#的方式,仿佛又回到了asp的时代。ExtJs的模板同样也可以组织生成灵活的html,而且代码和html有效的分离。本文将细细分析ExtJs模板的用法。行文之前我先把公共的html和用到的js数据贴在前面,后面的代码都要引用到。[html] 使用标签tpl和操作符fo

Edit Control 控件属性 添加消息 [大三TJB_708]_资质平庸的程序员的博客-程序员宝宝

开发环境:Visual Studio 2010应用程序:MFC Application笔记主要包含Edit Control控件的常用设置、多个Edit Control控件输入时单独判断当前输入控件的内容是否符合要求、Edit Control控件对应的一些消息宏。 1 Edit Control常用属性设置        MFC中很多控件的常用功能都是可以通过选中相应的控件然后设置

力扣----删除链表的倒数第N个节点_微笑向暖_li的博客-程序员宝宝

题目要求:给定一个链表,删除链表的倒数第 n 个节点,并且返回链表的头结点。示例:给定一个链表: 1-&gt;2-&gt;3-&gt;4-&gt;5, 和 n = 2.当删除了倒数第二个节点后,链表变为 1-&gt;2-&gt;3-&gt;5.说明:给定的 n 保证是有效的。进阶:你能尝试使用一趟扫描实现吗?解题思路:方法一:两次遍历算法:首先分析问题,问题可以简化为:删除从...

makefile学习1:初识makefile_天泉证道的博客-程序员宝宝

大材小用一下,下面给一个源文件写makefile,认识一下makefile的依赖性。源代码:#include "std.h"int main(int argv,char **argc){ int arr[10] = {1,2,3,4,5,6,7,8,9,10}; int i = 0; for(;i &lt; 10;i++) { printf("%d\n",arr[i])...

随便推点

JAVA 给图片添加水印_wjwisme的博客-程序员宝宝_java 图片批量添加水印

现在网络上的图片,为了防止其他人盗用,可以添加水印,比如我用csdn写博文,他就会自动给我上传的图片添加水印。前段时间写过一篇  JAVA 绘制验证码图像及解决黑色背景问题   ,在这篇的基础上,理解添加水印的功能更加容易。先上代码示例:/***** * 给图片添加文字水印 * @author wjw * */public class ImageUtils { pub

本地 robo3t 使用 ssh key 连接阿里云远程 mongodb 的 正确配置_什么香香脆脆我们最爱的博客-程序员宝宝

robo3t 版本:mongodb 版本:处于安全考虑,一般只允许内网 和本地访问数据库。但是 我的服务器买的是阿里云的,所以只能通过外网访问。(忽略阿里云控制台远程连接,这里说的是 本地数据 gui 工具)本地访问外网数据有2种方式:① 配置固定ip (配置0.0.0.0 是及其危险的操作),开启 27017端口 ② 通过ssh 密匙 访问 和 22 端口访问服务器,再由服务器本地...

elasticsearch基本操作_我就是个菜鸟2021的博客-程序员宝宝_elasticsearch 基本操作

ES 简介Elasticsearch 是基于Apache Lucene的开源分布式(全文)搜索引擎,,提供简单的RESTful API来隐藏Lucene的复杂性。ES 和 传统数据库对比传统数据库Elasticsearchdatabase(库)index(索引)table (表)ducument(文档)column(列)feild(属性)docker 下 安装 es 和 kibanaes 安装docker run -d -e ES_JAVA_POTS="

java 6 7 兼容_关于java:JDK 7类文件向后兼容JDK 6_036015的博客-程序员宝宝

JDK 7的哪些功能(不包括invokedynamic,因为它不被java使用)导致新的类文件版本不符合JDK 6.它表明所有功能都可以由生成粘合代码的编译器实现。 例如,switch语句中的String可以使用编译器生成的重复ifeq语句来实现。 我希望能够为编译器提供-source 1.7 -target 1.6标志以符合jre 6,同时在jdk 7中使用项目硬币功能。如果你用javap查看字...

Swift会取代Python吗?对初学者是否更适合学习Swift?答案在这里_冠亦Python的博客-程序员宝宝_swift和python

Swift会取代Python吗?也许我现在不会相信,至少从目前来讲,Python依然是目前世界上发展最快的语言。并且该语言的应用范围十分的广泛,无论是web开发、爬虫、数据分析、机器学习等,所以,它也被人称为最灵活的语言。尤其是在数据领域或者金融科技行业,Python岗位的需求是Java的两倍多,这都得益于Python的速度和算法性能。可说,该语言除了不适用于前端,几乎可以在任意领域驰骋。什么是SwiftSwift是由Chris Lattner在苹果工作时创建,并且该团队被称为世界上最先进的人

关于project server 2016 定制开发_我是成果啊的博客-程序员宝宝

对于project server的开发相信点开这个帖子的人都知道PS 2013 和它以下的版本都是可以通过 project server interface 俗称(PSI)是可以完成需求的,但是project server 2016 用不了PSI,在MSDN上面给到的回复是用CSOM来完成project server 2016的开发。下面就来介绍一下CSOM:首先引用projectserv

推荐文章

热门文章

相关标签