摘要:选择器优先级与效率优化本文收集网上各处关于选择器的文章总结,并自己归纳一篇。选择器类选择器标签选择器相邻选择器子选择器后代选择器通配符选择器属性选择器伪类选择器优先级高的不一定效率高举个例子与前者效率高于后者,而后者优先级高于前者。
CSS选择器优先级与效率优化
Date: 7th of Aug, 2015
Author: HaoyCn
本文收集网上各处关于CSS选择器的文章总结,并自己归纳一篇。
各类选择器的优先级important声明 1,0,0,0
ID选择器 0,1,0,0
类选择器 0,0,1,0
伪类选择器 0,0,1,0
属性选择器 0,0,1,0
标签选择器 0,0,0,1
伪元素选择器 0,0,0,1
通配符选择器 0,0,0,0
在上面的选择器中,此外,经测试
属性选择器 = 伪类选择器(应用最后一个)
:last-child{color:red;} [desc]{color:green;}
伪类选择器 > 相邻选择器
:last-child{color:green;} p ~ p{color:blue;}
相邻选择器 = 子选择器 = 后代选择器(应用最后一个)
p~p{color:red;} body p{color:blue;} body > p{color:green;}
后代选择器 > 标签选择器
p ~ p{color:blue;} p{color:green;}样式位置的影响
同 同级,应用取决于标签和 标签的先后顺序
元素style=""属性的优先级高于以上两种样式
!important 优先级高于以上两种样式
备注
!important 在IE6中的BUG:在同一组CSS属性中, !important不起作用。如:
#selector{color:blue !important;color:green;}选择器效率
读取选择器的原则是从右到左。因此,我们书写的右边的最后一个选择器,被称作关键选择器,对于效率有决定性影响。
以下效率排行由 @Steve Souders 提供。
ID选择器
类选择器
标签选择器
相邻选择器
子选择器
后代选择器
通配符选择器
属性选择器
伪类选择器
优先级高的不一定效率高
举个例子:#id .class 与 div#id p.class
前者效率高于后者,而后者优先级高于前者。我们需要在效率与优先级之间平衡取舍。
优化建议以下网址提供了诸多建议:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficie...
扼要摘其精要总结如下:
避免使用通配符
不使用标签名或类名修饰ID规则:如果规则使用ID选择器作为关键选择器,不要给规则添加标签名。因为ID本身就是唯一的,添加标签名会不必要地降低匹配效率。
不使用标签名修饰类:相较于标签,类更具独特性。
尽量选择最具体的方式:造成低效的最简单粗暴的原因就是在标签上使用太多规则。给元素添加类可以更快细分到类方式,可以减少规则去匹配标签的时间。
关于后代选择器和子选择器:避免使用后代选择器,非要用的话建议用子选择器代替,但子选择器也要慎用,标签规则永远不要包含子选择器。
利用可继承性:没必要在一般内容上声明样式。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/111096.html
摘要:每个标签可有一个独立的号。该标签是一个内联元素,与块级元素相反,内联元素不会自动在前后自动放置换行符,因此内联元素会默认在同一行显示。前端语言基础:HTML5 & CSS (一) HTML5:超文本标记语言 (1) 基本概念是由一系列成对出现的元素标签(标记)嵌套组合而成 ( XML也是标签构成的 )这些标签以<标签名称>的形式出现,用于标记文本内容的含义浏览器通过元素标...
摘要:不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换,减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话,他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级 一、CSS选择符 CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素。 作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CS...
摘要:不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换,减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话,他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级 一、CSS选择符 CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素。 作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CS...
摘要:优先级相同,与元素近的选择器生效。使用建议建议说明避免将通用选择器作为通用选择器。避免选择器用标签。避免使用子选择器。后代选择器是开销最最最最大的。 看了一下最近写的css代码,发现基本只用到了id选择器(js里)、后代选择器和类选择器(因为听大牛推荐使用类选择器,然后就开始大篇幅使用。。。)。所以想深入学习一下css选择器和css的效率优化,先记录所学的一部分,以备后续补充。 选择器...
摘要:本节内容会跟着上一节的内容继续完善,首先会补充选择器的浏览器支持情况主要是说,比如我们最常用的群组选择器在时才被支持,并且还支持了很多我们没有想到的选择器,如子元素选择器,属性选择器,了解后你会发现还是挺了不起的。 前言 上一篇系列文章整理了CSS选择器的基础使用方法,因为内容较多且细致,写了很多DEMO,目前将它整理成适合移动端浏览器的CSS选择器的参考手册,方便学习CSS的人参考使...
阅读 1654·2021-09-26 09:55
阅读 5247·2021-09-22 15:40
阅读 2011·2019-08-30 15:53
阅读 1497·2019-08-30 11:15
阅读 1713·2019-08-29 15:41
阅读 1869·2019-08-28 18:13
阅读 3144·2019-08-26 12:00
阅读 1667·2019-08-26 10:30