CSS选择器优先级与效率优化
2016-12-05 22:42
190 查看
各类选择器的优先级
important声明 1,0,0,0ID选择器 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></style>同
<link />同级,应用取决于
<style>标签和
<link />标签的先后顺序
元素
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本身就是唯一的,添加标签名会不必要地降低匹配效率。
不使用标签名修饰类:相较于标签,类更具独特性。
尽量选择最具体的方式:造成低效的最简单粗暴的原因就是在标签上使用太多规则。给元素添加类可以更快细分到类方式,可以减少规则去匹配标签的时间。
关于后代选择器和子选择器:避免使用后代选择器,非要用的话建议用子选择器代替,但子选择器也要慎用,标签规则永远不要包含子选择器。
利用可继承性:没必要在一般内容上声明样式。
相关文章推荐
- CSS选择器优先级以及效率排名以及如何提高选择器效率来提升web前端性能
- CSS选择器分类、选择器优先级以及CSS优化原则
- 目前的代码系统,一类的继承和方法的扩展为主的形式是否可以进行一种形式的优化?从而提升运行效率
- [MySQL优化] -- 如何查找SQL效率地下的原因
- [转]css选择器优先级深入理解
- CSS选择器优先级
- Css选择器的优先级
- 优化php效率,提高php性能的一些方法
- css选择器的分类及优先级计算方法…
- mongodb的固定集合(优化效率)
- [置顶] CSS选择器的权重及优先级
- 正则表达式的效率与优化
- 【CSS】CSS选择器优先级及!important属性
- CSS选择器优先级(一)
- 数据库索引--SQL语句执行效率、分析及优化
- 提高WEB服务器IIS并发数效率/服务器性能优化
- 详解CSS选择器、优先级与匹配原理
- [转] 效率优先 适度设计——网盟投放平台体验优化项目总结
- 详解CSS选择器、优先级与匹配原理
- [MySQL优化] -- 如何定位效率较低的SQL