css的选择器效率分析
2024-08-31 05:00:39
我们都知道,CSS具有叠加性
(同一个元素被多条样式规则指定),继承性
(后代元素会继承前辈元素的一些样式和属性)和优先级
(由于CSS的叠加性和继承性,将产生优先级,这指的是哪条样式规则会最终作用于指定的元素,他只遵循一条规则,指定的越具体,优先级越高)
由上可知,选择器指定的越具体,那么他的优先级就越高,
在这里,我们来总结一下css的选择器:
一、基本选择器(标签选择器、通用选择器、类和ID选择器)
选择器 | 描述 | CSS版本 |
---|---|---|
E | 标签选择器,匹配所有使用E标签的元素 | |
* | 通用元素选择器,匹配任何元素 | |
.info | class选择器,匹配所有class属性中包含info的元素 | |
#footer | id选择器,匹配所有id属性等于footer的元素 |
二、多元素的组合选择器(标签选择器[群组选择器]、后代选择器、子元素选择器、相邻选择器)
选择器 | 描述 | CSS版本 |
---|---|---|
E,F | 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号隔开 | |
E F | 包含选择符,匹配所有被E元素包含的F元素 | |
E>F | 子元素选择器,匹配所有E元素的儿子元素F | |
E+F | 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F | |
E~F | 匹配任何E标签之后的同级F标签 |
三、属性选择器
选择器 | 描述 | CSS版本 |
---|---|---|
E[attribute] | 匹配所有具有attribute属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如“[cheacked]”。以下同。) | 2.1 |
E[attribute=value] | 匹配所有attribute属性等于“value”的E元素 | 2.1 |
E[attribute~=value] | 匹配所有attribute属性具有多个空格分隔的值、其中一个值等于“value”的E元素 | 2.1 |
E[attribute^=value] | 匹配任何E标签之后的同级F标签 | 2.1 |
E[attribute$=value] | 匹配所有attribute属性值包含有“value”的E元素 | 3 |
E[attribute*=value] | 匹配所有attribute属性值是以"value"结束的E元素 | 3 |
四、伪类选择器
五、伪元素选择器
选择器 | 描述 | CSS版本 |
---|---|---|
E:first-line | 匹配所有E标签内的第一行 | 2.1 |
E:first-letter | 匹配所有E标签内的第一个字母 | 2.1 |
E:before | 在E标签之前插入生成的内容 | 2.1 |
E:after | 在E标签之后插入生成的内容 | 2.1 |
在这里,我们需要知道的是浏览器是如何读取选择器的。Chris Coyier曾在《Efficiently Rendering CSS》一文中说过“浏览器读取你的选择器,遵循的原则是从选择器的右边到左边读取。换句话说,浏览器读取选择器的顺序是由右到左进行”。
选择器的最后一部分,也就是选择器的最右边(在这个例子中就是a[title]部分)部分被称为“关键选择器”,它将决定你的选择器的效率如何?是高还是低。
那么如何让关键选择器更有效,性能化更高呢?其实很简单,主要把握一点“越具体的关键选择器,其性能越高”
选择器有一个固有的效率,我们来看Steve Souders给排的一个顺序:
id选择器(#myid)
类选择器(.myclassname)
标签选择器(div,h1,p)
相邻选择器(h1+p)
子选择器(ul > li)
后代选择器(li a)
通配符选择器(*)
属性选择器(a[rel="external"])
伪类选择器(a:hover,li:nth-child)
上面九种选择器的效率是从高到低排下来的,基中ID选择器的效率是最高,而伪类选择器的效率则是最低的。
我们来对比一下这几个实例,看看谁的效率是最高的:
1. #myId span
2. span #myId
由上面的例子,我们可以知道,下面的效率要比上面的高。因为最右边的关键选择器是最具体的,也符合上述的选择器优先级顺序。
最新文章
- Iphone 英语语言下通讯录排序问题
- mongoDB windows安装
- delphi模拟按键精灵自动控制PDF页面自动扩边的源代码
- ionic button笔记
- Java final static abstract关键字介绍
- 用HTML5实现手机摇一摇的功能(转)
- C#动态调用C++编写的DLL函数
- INSTALL_PARSE_FAILED_MANIFEST_MALFORMED 错误
- 002-C语言概览
- FLEX 图片拷贝
- Delphi RichEdit的内容保存为图片
- DEV控件的Gridview1
- vs2017添加引用时报错未能正确加载“ReferenceManagerPackage”包。
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
- Comet OJ Contest #2
- Robot Framework安装及入门
- 分布式协议学习笔记(三) Raft 选举自编写代码练习
- 如何在MacBook的以太网端口上成功运行DHCP服务器?
- 用SignalTap进行硬件仿真
- linux 用户配制文件 用户增加及删除 以及用户属于的更改
热门文章
- HDU - 5894 Pocky(概率)
- 使用Flask+uWsgi的方式部署一个blog网站
- 百度编辑器ueditor1.4.3配置记录
- Master Nginx(8) - Troubleshooting Techniques
- springCloud学习-高可用的分布式配置中心(Spring Cloud Config)
- 【ACM】hdu_zs3_1008_Train Problem I_201308100835
- 2.3-STP生成树
- QT中使用高速排序
- Effective Java:对于全部对象都通用的方法
- scp and tar