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;}
<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更简洁、高效的更多相关文章
-
Web 性能优化：21 种优化 CSS 和加快网站速度的方法
这是 Web 性能优化的第 4 篇,上一篇在下面看点击查看: Web 性能优化:使用 Webpack 分离数据的正确方法 Web 性能优化:图片优化让网站大小减少 62% Web 性能优化:缓存 Re ...
-
提高 web 应用性能之 CSS 性能调优
简介 Web 开发中经常会遇到性能的问题,尤其是 Web 2.0 的应用.CSS 代码是控制页面显示样式与效果的最直接“工具”,但是在性能调优时他们通常被 Web 开发工程师所忽略,而事实上不规范的 ...
-
Web性能优化-合并js与css，减少请求
Web性能优化已经是老生常谈的话题了, 不过笔者也一直没放在心上,主要的原因还是项目的用户量以及页面中的js,css文件就那几个,感觉没什么优化的.人总要进步的嘛,最近在被angularjs吸引着,也 ...
-
更简洁的 CSS 清理浮动方式
CSS清理浮动有很多种方式,像使用 br 标签自带的 clear 属,使用元素的 overflow,使用空标签来设置 clear:both 等等.但考虑到兼容问题和语义化的问题,一般我们都会使用如下代 ...
-
Web性能优化：What? Why? How?
为什么要提升web性能? Web性能黄金准则:只有10%~20%的最终用户响应时间花在了下载html文档上,其余的80%~90%时间花在了下载页面组件上. web性能对于用户体验有及其重要的影响,根据 ...
-
[转] 《高性能HTML5》读后整理的Web性能优化内容
读后感 先说说<高性能HTML5>这本书的读后感吧,个人觉得这本书前两章跟书的标题完全搭不上关系,或者说只能算是讲解了“高性能”这三个字,HTML5完全不见踪影.个人觉得作者应该首先把HT ...
-
web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识
web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识 ——不会WPO.SEO的前端工程师不是好码农 作为一名web前端工程师,除了要实现上级的要求,满足其所需要的功能,还要在平时 ...
-
关于WEB 性能优化 （摘抄）
压缩源代码和图片 JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为50%到70%,PNG可以使用一些开源压缩软件来压缩,比如24色 ...
-
web性能优化——浏览器相关
简介 优化是一个持续的过程.所以尽可能的不要有人为的参与.所以能自动化的或者能从架构.框架级别解决的就最更高级别解决. 这样即能实现面对开发人员是透明的.不响应,又能确保所有资源都是被优化过的. 场景 ...
随机推荐
-
乐1S 5.8(Android 6.0) 刷第三方recovery并刷入root权限
说明 我的是 乐视1S, 系统为EUI 5.8 (powered by Android 6.0) 使用的是 superSu来root, 你可以到这里下载 文件 *下载 Recovery Flashab ...
-
WCF基础教程之异常处理：你的Try..Catch语句真的能捕获到异常吗？
在上一篇WCF基础教程之开篇:创建.测试和调用WCF博客中,我们简单的介绍了如何创建一个WCF服务并调用这个服务.其实,上一篇博客主要是为了今天这篇博客做铺垫,考虑到网上大多数WCF教程都是从基础讲起 ...
-
Java高效编程之一【创建和销毁对象】
一.考虑用静态工厂方法替代构造函数 代表实现:java.util.Collection Framework Boolean类的简单例子: public static Boolean valueOf ( ...
-
Spring Injection with @Resource, @Autowired and @Inject
August 1st, 2011 by David Kessler Overview I’ve been asked several times to explain the difference b ...
-
Undefined symbols for architecture armv7错误解决方法
Undefined symbols for architecture armv7: "_OBJC_CLASS_$_BriefMainModel", referenced from: ...
-
Mybatis sql映射文件浅析 Mybatis简介（三）
简介 除了配置相关之外,另一个核心就是SQL映射,MyBatis 的真正强大也在于它的映射语句. Mybatis创建了一套规则以XML为载体映射SQL 之前提到过,各项配置信息将Mybatis应用的整 ...
-
高精度加法——经典题 洛谷p1601
题目背景 无 题目描述 高精度加法,x相当于a+b problem,[b][color=red]不用考虑负数[/color][/b] 输入输出格式 输入格式: 分两行输入a,b<=10^500 ...
-
Java Web请求和响应机制
1.请求响应流程图 =================== 服务器处理请求的流程: 服务器每次收到请求时,都会为这个请求开辟一个新的线程. 服务器会把客户端的请求数据封装到request对象中,req ...
-
【亲测】<;g++/gcc>;CentOS下g++: command not found问题的解决(c++环境安装)
CentOS下g++: command not found问题的解决 2017年02月27日 18:09:06 阅读数:5174 标签: centosgcc 更多 个人分类: 问题分析 版权声明: ...
-
bzoj 4443: [Scoi2015]小凸玩矩阵
Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 149 Solved: 81[Submit][Status][Discuss] Description ...