首頁  >  文章  >  web前端  >  CSS选择器优先级与效率优化_html/css_WEB-ITnose

CSS选择器优先级与效率优化_html/css_WEB-ITnose

WBOY
WBOY原創
2016-06-24 11:39:17868瀏覽

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;}

    样式位置的影响

  • 同级,应用取决于

  • 元素属性的优先级高于以上两种样式

  • !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本身就是唯一的,添加标签名会不必要地降低匹配效率。

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

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

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

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

  • 陳述:
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn