用了这么多年的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犯一些低效错误(也是我以前常常犯的
错误,还老以为这样写才是高效的):
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
分享到:
相关推荐
《CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation》写作的目的是要确保CSS不会成为开发过程或网站性能的瓶颈,确保读者可以运用一些工具、框架、预处理来提升开发效率和节约人力成本,确保所讲解的内容...
css3动画原理制做的比较简洁的指针时钟.zip
书写高效的CSS指南,书写高效的CSS指南,书写高效的CSS指南
《CSS高效开发实战——CSS 3、LESS、SASS、Bootstrap、Foundation》内容精练、重点突出、实例丰富、讲解通俗,是广大CSS设计人员和前端开发人员必备的参考书,同时也非常适合大中专院校师生学习阅读,也可作为高等...
高效学习CSS布局之道:通过244个范例掌握网页样式与布局技术
CSS原理 揭秘 一本讲述网页设计原理
CSS Sprites工作原理CSS Sprites工作原理
简洁设计CSS3模板
纯CSS简洁TAB
绿色简洁的css模板下载_绿色 html css 简洁.zip绿色简洁的css模板下载_绿色 html css 简洁.zip
CSS高效开发实战—CSS 3、LESS、SASS、Bootstrap、Foundation源码,超新、超全的css技术汇总。
根据一些CSS写作经验,如何提高渲染效率及所占用消耗的资源,我们来浅谈一下CSS的渲染效率,书写高效的CSS
《CSS高效开发实战—CSS 3、LESS、SASS、Bootstrap、Foundation》epub版
全书以传达CSS布局思维为中心,通过页面中的文字、图片、表格、表单等常见元素的处理及各种页面布局方式的使用,使读者能深入了解到如何在页面中更好 地运用CSS布局。尤其是在页面布局的部分中,全面分析了多种布局...
内容包含: CSS书写规范 如何写出 高效易懂的CSS代码 CSS效率优化建议; 新手或者追求优化性能的同学 值得一看
简洁透明网格css模板是一款固定背景的透明简洁css网站模板。
简洁的邮件CSS模板_简洁 邮件 邮箱 灰色.zip简洁的邮件CSS模板_简洁 邮件 邮箱 灰色.zip
CSS Sprites优点 利用CSS Sprites能很好地减少了网页的http请求,从而大大的提高了页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因; CSS Sprites能减少图片的字节,曾经比较过多次...
绿色简洁的css模板下载_绿色 html css 简洁.rar