当前位置:  编程技术>WEB前端

了解CSS的查找匹配原理,让CSS更简洁、高效

    来源: 互联网  发布时间:2014-10-07

    本文导语:  看1个简单的CSS: DIV#divBox p span.red{color:red;},按习惯我们对这个CSS 的理解是,浏览器先查找id为divBox的DIV元素,当找到后,再找其下的所有p元素,然后再查找所有span元素,当发现有span的class为red的时候,就应用该style。多么简...

看1个简单的CSS:

DIV#divBox p span.red{color:red;},按习惯我们对这个CSS 的理解是,浏览器先查找id为divBox的DIV元素,当找到后,再找其下的所有p元素,然后再查找所有span元素,当发现有span的class为red的时候,就应用该style。多么简单易懂的原理,可是这个理解却是完完全全相反、错误的。


匹配原理:

浏览器CSS匹配不是从左到右进行查找,而是从右到左进行查找。比如之前说的 DIV#divBox p span.red{color:red;},浏览器的查找顺序如下:

  先查找html中所有class='red'的span元素,找到后,再查找其父辈元素中是否有p元素,再判断p的父元素中是否有id为divBox的div元素,如果都存在则匹配上。

浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。比如如下html和css:

代码如下:


DIV#divBox p span.red{color:red;}



s1


s2


s3


s4





如果按从左到右查找,哪会先查找到很多不相关的p和span元素。而如果按从右到左的方式进行查找,则首先就查找到的元素。firefox称这种查找方式为key selector(关键字查询),所谓的关键字就是样式规则中最后(最右边)的规则,上面的key就是span.red。


简洁、高效的CSS:
所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找,下面列出一些我们常见的写CSS犯一些低效错误(也是我以前常常犯的错误,还老以为这样写才是高效的):

1.不要在ID选择器前使用标签名
一般写法:DIV#divBox
更好写法:#divBox
解释: 因为ID选择器是唯一的,加上div反而增加不必要的匹配。

2.不要再class选择器前使用标签名
一般写法:span.red
更好写法:.red
解释: 同第一条,但如果你定义了多个.red,而且在不同的元素下是样式不一样,则不能去掉,比如你css文件中定义如下:
p.red{color:red;}
span.red{color:#ff00ff}
如果是这样定义的就不要去掉,去掉后就会混淆,不过建议最好不要这样写
3.尽量少使用层级关系
一般写法:#divBox p .red{color:red;}
更好写法:.red{..}

4.使用class代替层级关系
一般写法:#divBox ul li a{display:block;}
更好写法:.block{display:block;}

PS:看有些同学对从右到左的理论保持怀疑,下面贴出firefox和google的2篇相关css解释的文章,供大家参考

mozilla firefox:https://developer.mozilla.org/en/Writing_Efficient_CSS

google page-speed:http://code.google.com/intl/zh-CN/speed/page-speed/docs/rendering.html

    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • win7, win8安装docker需要了解的概念
  • 想了解LINUX一定能明白汇编语言吗?
  • 八个问题帮你快速了解Docker
  • 进程迁移问题,急切想了解!!!!!!!!
  • 程序猿,千万别说你不了解Docker!
  • 谁了解Panabit,用它来做流控效果如何
  • 想深入了解操作系统该怎么做
  • 谁对JBuilder4比较了解,有什么好书可以介绍,或有什么建议
  • 关于JIT技术,有对它了解的朋友吗?
  • 要学习JSP,一定要先了解XML吗??
  • 谁了解JAVA方面的认证,想考一个JAVA的认证!XIEXIE
  • 了解一下北京搞java的要求和待遇,来者有分。
  • 我想了解一下,用LINUX的朋友们,
  • 关于Linux的文化了解
  • 有谁了解“江苏新晨信息科技发展有限公司”吗,公司怎么样?
  • 谁了解postsql
  • 有没有在大连搞linux的,我想了解一下大连的linux情况!
  • 有谁了解postsql
  • L想了解一下Linux驱动开发的前景如何?难度大小如何?
  • 菜鸟问题:如何了解系统关于某个C语言变量类型是怎样定义的?
  • 请问:做(linux)驱动开发对于电子技术需要了解到什么程度,


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3