用了这么多年的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. Android -- 检测耳机插入状态

    原理                                                                                    其实android系统在耳机 ...

  2. CoffeeRobotTeam项目组报告

    一.小组分工 模块 任务 责任人 备注 报告 需求分析 熊振威 功能分析 熊振威 项目报告 熊振威 人机界面 秦勤.洪超 单元测试 姜进.张文强 机器人代码 机器人类 徐意.余拥军.孙智博 机器人运动 ...

  3. 断点续传 (HTTP) 归纳

    由于最近项目中要上传较大的文件,基于公司原有的底层框架的局限性,对于大文件的传输都束手无策,基于文件传输的安全性,考虑用断点续传(HTTP)以及FTP上传两种方式实现下面归纳下HTTP续传和FTP上传 ...

  4. 使用Java Service Wrapper在Linux下配置Tomcat应用

    前言 Java Service Wrapper是Tanuki Software的一个产品,可以将Java应用注册成Windows或Linux服务,使其可以随系统开机启动,同时可以监控Java应用的状态 ...

  5. PP生产订单的BADI增强 WORKORDER_UPDATE

    METHOD if_ex_workorder_update~before_update. *---------------------->增强1 开始* "当生产订单类型为PP01时, ...

  6. 【BZOJ】【3163】【HEOI2013】Eden的新背包问题

    多重背包/思路题 多次询问,每次从所有物品中忽略一件,问最大收益…… 这题我用的zyf的一个“暴力”做法,就是先预处理出来g1[i][j]表示1~i号物品花了j块钱的最大价值,g2[i][j]表示i~ ...

  7. 剑指offer-17题

    题目要求:输入一个表示整数的字符串,把该字符串转换成整数并输出.例如输入字符串"345",则输出整数345. 分析:这道题能够很好地反应出程序员的思维和编程习惯. 的确,自己编写的 ...

  8. 3-Highcharts 3D图之3D柱状图分组叠堆3D图

    <!DOCTYPE> <html lang='en'> <head> <title>3-Highcharts 3D图之3D柱状图分组叠堆3D图</ ...

  9. 疯狂java讲义——初始化块

  10. 首次发布App，In-App Purchase 无法submit for review 问题的解决方案

    原地址:http://blog.csdn.net/blucenong/article/details/7819195 一个IDP首次create app 然后首次create new IAP的时候,我 ...