弄清楚CSS的匹配原理

让你写出高效的CSS
服务器君一共花费了168.452 ms进行了4次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

用了这么多年的CSS,现在才明白CSS的真正匹配原理,不知道你是否也跟我一样?看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:

<style>
  DIV#divBox p span.red{color:red;}
<style>
<body>
  <div id="divBox">
  	<p><span>s1</span></p>
  	<p><span>s2</span></p>
  	<p><span>s3</span></p>
  	<p><span class='red'>s4</span></p>
  </div>
</body>

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

简洁、高效的CSS写法

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

  • 不要在ID选择器前使用标签名
  • 一般写法:DIV#divBox

    更好写法:#divBox

    解释:因为ID选择器是唯一的,加上div反而增加不必要的匹配。

  • 不要再class选择器前使用标签名
  • 一般写法:span.red

    更好写法:.red

    解释: 同第一条,但如果你定义了多个.red,而且在不同的元素下是样式不一样,则不能去掉,比如你css文件中定义如下:

    p.red{color:red;}
    span.red{color:#ff00ff}
    

    如果是这样定义的就不要去掉,去掉后就会混淆,不过建议最好不要这样写。

  • 尽量少使用层级关系
  • 一般写法:#divBox p .red{color:red;}

    更好写法:.red{..}

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

    更好写法:.block{display:block;}

firefox和google的2篇相关css解释的文章,供大家参考:

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

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

本文地址:http://www.nowamagic.net/librarys/veda/detail/580,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/580

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《php和mysql web开发(原书第4版)》 Luke Welling (作者), Laura Thomson (作者), 武欣 (译者)

《php和mysql web开发(原书第4版)》将PHP开发与MySQL应用相结合,分别对PHP和MySQL做了深入浅出的分析,不仅介绍PHP和MySQL的一般概念,而且对PHP和MySQL的Web应用做了较全面的阐述,并包括几个经典且实用的例子。《php和mysql web开发(原书第4版)》是第4版,经过了全面的更新、重写和扩展,包括PHP 5.3最新改进的特性(例如,更好的错误和异常处理),MySQL的存储过程和存储引擎,Ajax技术与Web 2.0以及Web应用需要注意的安全问题。

更多计算机宝库...