CSS选择器、优先级与匹配原理
2023-09-14 08:57:46 时间
为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好
废话就不多说了
计算指定选择器的优先级:重新认识CSS的权重
- 通配选择符的权值 0,0,0,0
- 标签的权值为 0,0,0,1
- 类的权值为 0,0,1,0
- 属性选择的权值为
0,0,1,10,0,1,0 - 伪类选择的权值为 0,0,1,0
- 伪对象选择的权值为 0,0,0,1
- ID的权值为 0,1,0,0
- important的权值为最高 1,0,0,0
使用的规则也很简单,就是 选择器的权值加到一起,大的优先;如果权值相同,后定义的优先 。虽然很简单,但如果书写的时候没有注意,很容易就会导致CSS的重复定义,代码冗余。
从上面我们可以得出两个关键的因素:
- 权值的大小跟选择器的类型和数量有关
- 样式的优先级跟样式的定义顺序有关
记得以前看过一篇文章 256个class类名选择器干掉一个id选择器实例页面
http://www.zhangxinxu.com/study/201208/256-class-fire-an-id.html
Gecko overflows the count of classes into the count of IDs, each of which holds 8 bits. — Cameron McCormack (@heycam) August 16, 2012
给出的答案是:所有的类名(classes)都是以8字节字符串存储的。8字节所能hold的最大值就是255. 当同时出现256个class, 势必会越过其边缘,溢出到id区域。
总结:
比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数 ,至于各级别的优先级,大家应该已经很清楚了,就是:
important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符 通配符 > 继承
这也就解释了为什么11个标签的定义会比不上1个类的定义,1个类加11个标签会比不上2个类的权重高。
选择器种类
查阅资料归纳下大概有如下几种:
-
通配选择器
-
类型选择器
-
ID选择器
-
类选择器
-
包含选择器
-
子元素选择器
-
相邻兄弟选择器
-
属性选择器
css1-css3提供非常丰富的选择器,但是由于某些选择器被各个浏览器支持的情况不一样,所以很多选择器在实际css开发中很少用到
关于CSS的执行效率:
- 样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和规则匹配的元素,或者因为不匹配而退出。
- 如果你非常在意页面的性能那千万别使用CSS3选择器。实际上,在所有浏览器中,用 class 和 id 来渲染,比那些使用同胞,后代选择器,子选择器(sibling, descendant and child selectors)对页面性能的改善更值得关注。
Google 资深web开发工程师Steve Souders对CSS选择器的效率从高到低做了一个排序:
-
1.id选择器(#myid)2.类选择器(.myclassname)3.标签选择器(div,h1,p)4.相邻选择器(h1+p)5.子选择器(ul < li)6.后代选择器(li a)7.通配符选择器(*)8.属性选择器(a[rel="external"])9.伪类选择器(a:hover,li:nth-child)
-
上面九种选择器中ID选择器的效率是最高,而伪类选择器的效率则是最低
-
详细的介绍大家还可以点击Writing efficient CSS selectors。
相关文章
- 最佳实践| 一文读懂《MongoDB 使用规范及最佳实践》原理
- CSS画三角形及其原理
- 【说站】java动态代理的原理
- 【说站】CSS鼠标跟随的原理
- 红外温度计(测温枪)原理是什么?
- https://haobin.work/2022/02/13/中间件/es工作原理/
- Vue源码之数据响应式原理
- 解释 JavaScript 中计时器的工作原理
- 【CSS】清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 )
- CSS如何影响MySQL的使用(css影响MySQL)
- MySQL三次握手原理解析(mysql三次握手)
- Oracle主从备份原理获取数据库完整性(oracle主从备份原理)
- 深入理解Redis集群架构图的原理(redis集群架构图原理)
- Redis集群原理与实战深度剖析(redis集群原理与实战)
- 红色闪电Redis缓存技术的原理(redis缓存技术原理)
- CSS规则层叠的应用css必须要注意的几点
- php压缩多个CSS为一个css的代码并缓存