CSS > 选择器优先级与效率优化

标签: css css选择器 | 发表时间:2015-08-07 17:18 | 作者:HaoyCn
出处:http://segmentfault.com/blogs

CSS选择器优先级与效率优化

Date: 7th of Aug, 2015

Author: HaoyCn

本文收集网上各处关于CSS选择器的文章总结,并自己归纳一篇。

各类选择器的优先级

  1. important声明 1,0,0,0
  2. ID选择器 0,1,0,0
  3. 类选择器 0,0,1,0
  4. 伪类选择器 0,0,1,0
  5. 属性选择器 0,0,1,0
  6. 标签选择器 0,0,0,1
  7. 伪元素选择器 0,0,0,1
  8. 通配符选择器 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;}

样式位置的影响

  1. <style></style><link /> 同级,应用取决于 <style>标签和 <link /> 标签的先后顺序

  2. 元素 style=""属性的优先级高于以上两种样式

  3. !important 优先级高于以上两种样式

备注

!important 在IE6中的BUG:在同一组CSS属性中, !important不起作用。如:

  #selector{color:blue !important;color:green;}

选择器效率

读取选择器的原则是从右到左。因此,我们书写的右边的最后一个选择器,被称作关键选择器,对于效率有决定性影响。

以下效率排行由 @Steve Souders 提供。

  1. ID选择器
  2. 类选择器
  3. 标签选择器
  4. 相邻选择器
  5. 子选择器
  6. 后代选择器
  7. 通配符选择器
  8. 属性选择器
  9. 伪类选择器

优先级高的不一定效率高

举个例子: #id .classdiv#id p.class

前者效率高于后者,而后者优先级高于前者。我们需要在效率与优先级之间平衡取舍。

优化建议

以下网址提供了诸多建议:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficie...

扼要摘其精要总结如下:

  1. 避免使用通配符

  2. 不使用标签名或类名修饰ID规则:如果规则使用ID选择器作为关键选择器,不要给规则添加标签名。因为ID本身就是唯一的,添加标签名会不必要地降低匹配效率。

  3. 不使用标签名修饰类:相较于标签,类更具独特性。

  4. 尽量选择最具体的方式:造成低效的最简单粗暴的原因就是在标签上使用太多规则。给元素添加类可以更快细分到类方式,可以减少规则去匹配标签的时间。

  5. 关于后代选择器和子选择器:避免使用后代选择器,非要用的话建议用子选择器代替,但子选择器也要慎用,标签规则永远不要包含子选择器。

  6. 利用可继承性:没必要在一般内容上声明样式。

相关 [css 选择 优化] 推荐:

CSS > 选择器优先级与效率优化

- - SegmentFault 最新的文章
CSS选择器优先级与效率优化. 本文收集网上各处关于CSS选择器的文章总结,并自己归纳一篇. 在上面的选择器中,此外,经测试. 属性选择器 = 伪类选择器(应用最后一个). 伪类选择器 > 相邻选择器. 相邻选择器 = 子选择器 = 后代选择器(应用最后一个). 后代选择器 > 标签选择器. 同.

CSS,样式选择器

- - 博客园_首页
CSS(层叠样式表)使用来美化页面用的,CSS主要有元素内连,页面嵌入和外部引用三种使用方式;. 1.元素内联,直接将样式写入元素的style属性中,适用于样式没有可复用性的场合. 2.页面嵌入,在head头部进行嵌入. 结果:表示页面中所有的input都采用指定的样式. 适用于样式复用,减小页面的面积.

[译]XPath和CSS选择器

- - 博客园_首页
原文: http://ejohn.org/blog/xpath-css-selectors. 我认为将这两种选择器的写法做一个比较是很有价值的.. 所有P元素的第一个子元素. 从语法上看,我非常惊讶这两种选择器在某些情况下的相似性,尤其是'>'和'/'两者之间.虽然他们并不总是有着相同的功能(XPath中要取决于正在使用的轴),但通常情况下他们指的都是某个父元素的子元素.还有,空白符' '和'//'都意味着当前元素的所有后代元素.最后是星号'*',类似于通配符,表示所有元素,而不管是哪种标签名..

Css选择器命名规则

- ninickck - 前端观察
操作系统版本:Windows 7. 浏览器版本:IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev. 受影响的浏览器:所有浏览器.. 经常讲到css选择器命名规则,其实不只是在团队合作基础上来讲这个,每个浏览器,IE产品,火狐,苹果,谷歌,都会因为命名不规范会产生不同样式...

编写高效的 CSS 选择器

- - 博客 - 伯乐在线
伯乐在线注:我们昨日在 @程 序员的那些事 微博上推荐了英文原文,感谢 @freestyle21 和 @沈涛-WEB工程师 的热情参与. 高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在Sky公司工作之时,所感兴趣的,关注已久的话题. 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也可以变得很低能.

网站CSS选择器性能讨论

- - 阿里巴巴(中国站)用户体验设计部博客
    CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素. 作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CSS选择符模式,尽量编写高效的CSS选择符,从而加快页面的渲染速度,缩短页面呈现时间. 我们先来看一下safari和webkit的架构师David Hyatt的两段话:.

推荐三十款CSS样式选择器代码

- 小伟 - UED TEAM,用户体验设计,web前端开发
你也许已经掌握了id、class、后台选择器这些基本的css选择器. 下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题. 掌握了它们,才能真正领略css的巨大灵活性. 星状选择符会在页面上的每一个元素上起作用. web设计者经常用它将页面中所有元素的margin和padding设置为0.

30个最常用css选择器解析

- We_Get - 博客园-首页原创精华区
你也许已经掌握了id、class、后台选择器这些基本的css选择器. 下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题. 掌握了它们,才能真正领略css的巨大灵活性. 星状选择符会在页面上的每一个元素上起作用. web设计者经常用它将页面中所有元素的margin和padding设置为0.

小tip: CSS后代选择器可能的错误认识

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2286. 一、关于类选择器的一个问题. 假设有下面一个面试题,CSS代码如下:. 问:第一行和第二行文字颜色分别是. 这个例子很简单,我估计基本上都能回答正确:DOM越深的类名权重越高,因此,第一行文字红色,第二行文字绿色第一行文字绿色,第二行文字红色.

10个你必须要知道的CSS选择器

- - Jackchen Design 1984
要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器. HTML页面中的元素就是通过CSS选择器进行控制的. 每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”. “选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素.