用了这么多年的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

【web性能】让css更简洁、高效的更多相关文章

  1. Web 性能优化：21 种优化 CSS 和加快网站速度的方法

    这是 Web 性能优化的第 4 篇,上一篇在下面看点击查看: Web 性能优化:使用 Webpack 分离数据的正确方法 Web 性能优化:图片优化让网站大小减少 62% Web 性能优化:缓存 Re ...

  2. 提高 web 应用性能之 CSS 性能调优

    简介 Web 开发中经常会遇到性能的问题,尤其是 Web 2.0 的应用.CSS 代码是控制页面显示样式与效果的最直接“工具”,但是在性能调优时他们通常被 Web 开发工程师所忽略,而事实上不规范的 ...

  3. Web性能优化-合并js与css，减少请求

    Web性能优化已经是老生常谈的话题了, 不过笔者也一直没放在心上,主要的原因还是项目的用户量以及页面中的js,css文件就那几个,感觉没什么优化的.人总要进步的嘛,最近在被angularjs吸引着,也 ...

  4. 更简洁的 CSS 清理浮动方式

    CSS清理浮动有很多种方式,像使用 br 标签自带的 clear 属,使用元素的 overflow,使用空标签来设置 clear:both 等等.但考虑到兼容问题和语义化的问题,一般我们都会使用如下代 ...

  5. Web性能优化：What? Why? How?

    为什么要提升web性能? Web性能黄金准则:只有10%~20%的最终用户响应时间花在了下载html文档上,其余的80%~90%时间花在了下载页面组件上. web性能对于用户体验有及其重要的影响,根据 ...

  6. [转] 《高性能HTML5》读后整理的Web性能优化内容

    读后感 先说说<高性能HTML5>这本书的读后感吧,个人觉得这本书前两章跟书的标题完全搭不上关系,或者说只能算是讲解了“高性能”这三个字,HTML5完全不见踪影.个人觉得作者应该首先把HT ...

  7. web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识

    web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识 ——不会WPO.SEO的前端工程师不是好码农 作为一名web前端工程师,除了要实现上级的要求,满足其所需要的功能,还要在平时 ...

  8. 关于WEB 性能优化 （摘抄）

    压缩源代码和图片 JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为50%到70%,PNG可以使用一些开源压缩软件来压缩,比如24色 ...

  9. web性能优化——浏览器相关

    简介 优化是一个持续的过程.所以尽可能的不要有人为的参与.所以能自动化的或者能从架构.框架级别解决的就最更高级别解决. 这样即能实现面对开发人员是透明的.不响应,又能确保所有资源都是被优化过的. 场景 ...

随机推荐

  1. 安装ubuntu时将boot目录单独挂载的意义

    只有一个意义那就是当你的情况是:单个硬盘里面安装多个系统. 如果不是这样,就别动它.

  2. 关于js with语句的一些理解

    关于js with语句的一些理解   今天看到js的with语句部分,书中写到,with语句接收的对象会添加到作用域链的前端并在代码执行完之后移除.看到这里,我有两点疑问,添加到作用域链前端是不是指对 ...

  3. 老陈 ASP.NET封装

    第一个页面 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data ...

  4. chm文件右边部分查看不了

    右键属性-> 下面好像有句话是说该文件来自网络为保护您的计算机什么什么的,, 然后你解除锁定就能用了 版权声明:本文为博主原创文章,未经博主允许不得转载.

  5. shell编程之数组和关联数组

    一.数组类似c语言的数组 1.两种赋值方式 可以整体定义数组:ARRAY_NAME=(value0 value1 value2 value3 ...) 此时数组的下标默认是从0开始的 还可以单独定义数 ...

  6. poj 1300 Door Man 欧拉回路

    题目链接:http://poj.org/problem?id=1300 You are a butler in a large mansion. This mansion has so many ro ...

  7. C#异常处理策略

    1.如果某些异常,本组件无法处理,不要捕获,但要声明有这个异常.例如SecurityException. 2.如果某些异常,本组件可以处理,捕获并处理它,不再声明此异常.例如DirectoryNotF ...

  8. PC和移动端浏览器同步测试工具Browsersync使用介绍

    在移动端网页开发中,总是因为不方便调试,导致各种问题不容易被发现.但是现在有了Browsersync,一切都解决了. 不熟悉的同学可以看看Browsersync的官方网站Browsersync中文网. ...

  9. Extjs整体加载树节点

    Ext.onReady(function () {             Ext.define('company', {                 extend: 'Ext.data.Mode ...

  10. JavaScript文件应该放在网页的什么位置

    JavaScript文件应该放在网页的什么位置 http://www.lihuai.net/qianduan/js/352.html 在<良好的JavaScript编程习惯>系列教程的第三 ...