css的选择器效率分析
我们都知道,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
由上面的例子,我们可以知道,下面的效率要比上面的高。因为最右边的关键选择器是最具体的,也符合上述的选择器优先级顺序。
css的选择器效率分析的更多相关文章
- CSS选择器性能分析
写了几篇关于js的博客,也是关于性能的,现在,我觉得有必要那css来认真分析一下了.之前只是看别人这么写就跟着写,但是没有去研究这样写或者是不是正确的写法,性价比怎么样,渲染的效率好么!这些都没有考虑 ...
- CSS选择器效率
CSS选择器效率从高到低的排序如下: ID选择器 比如#header 类选择器 比如.promo 元素选择器 比如 div 兄弟选择器 比如 h2 + p 子选择器 比如 li > ul 后代选 ...
- CSS选择器效率问题
今天学习了CSS各类选择器,对其效率问题有些疑问,故总结了一些学习笔记 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也可以变得很低能.这很容易被忘记,尤其是当你意识到你会的 ...
- CSS初识- 选择器 &背景& 浮动& 盒子模型
# CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 &g ...
- CSS 后代选择器
后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...
- CSS样式选择器优先级
CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...
- jquery选择器效率优化问题
jquery选择器效率优化问题 jquery选择器固然强大,但是使用不当回导致效率问题: 1.要养成将jQuery对象缓存进变量的习惯 //不好的写法 $('#btn').bind("c ...
- 漫谈CSS的渲染效率
总结了部分所学.所听.所看.所问的一些CSS写作经验,书写高效的CSS - 漫谈CSS的渲染效率,它们与渲染效率及所占用消耗的资源有一定的关 联.部分为自己理解所写,不排除会有错漏,欢迎提供更好的意见 ...
- css以及选择器基础
CSS样式基础了解1.css基础语法CSS样式的出现是为了将内容和表现分离极大的提高了工作效率内联样式(在 HTML 元素内部)<p style="margin-left: 10px: ...
随机推荐
- EF 配置
DbContext public class ZSZDbContext : DbContext { //ILog ILogger 容易混淆 private static ILog log = LogM ...
- Linux内核同步:per_cpu变量
per cpu变量相关函数和宏 DEFINE_PER_CPU_SHARED_ALIGNED(type,name):静态分配per_cpu数组,数组名为name,结构类型为type DEFINE_PER ...
- [SQL Service]从一张表取值更新另一张表字段
1. update table_A set table_A_column = ab.column from table_A aa left join table_B ab on aa.xx = ab ...
- Python学习【第6篇】:Python之常用模块1
常用模块一. collocations 模块 时间模块 random模块 os模块 sys模块 序列化模块 re模块 常用模块二:这些模块和面向对象有关 hashlib模块 configparse模块 ...
- 数据结构与算法(5) -- deque
vector是单向开口的连续线性空间,deque则是一种双向开口的连续线性空间.所谓双向开口,意思是可以在头尾两端分别做元素的插入和删除操作.stl中deque与vector最大的差异,一在于dequ ...
- poj2385 - Apple Catching【动态规划】
Description It is a little known fact that cows love apples. Farmer John has two apple trees (which ...
- ubuntu_linux /boot/grub/grub.conf
==========================================UBUNTU /boot/grub/grub.conf文件============================ ...
- 【转载】Apache shutdown unexpectedly启动错误解决方法
http://blog.csdn.net/dong123dddd/article/details/21372179 xampp启动时显示的错误为: 9:52:41 [Apache] Attempti ...
- Android音乐、视频类APP常用控件:DraggablePanel(1)
Android音乐.视频类APP常用控件:DraggablePanel(1) Android的音乐视频类APP开发中,常涉及到用户拖曳视频.音乐播放器产生一定交互响应的设计需求,最典型的以You ...
- mysql 数据的某个范围
select * from table_name where limit num1, num2; num1 : 开始条目 num2 :选择数目