弄清楚CSS的匹配原理让你写出高效的CSS
用了这么多年的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
弄清楚CSS的匹配原理让你写出高效的CSS的更多相关文章
- 如何写出优雅的CSS代码 ？(转)
对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混 ...
- 如何写出优雅的css代码 ？
如何写出优雅的css代码 ? 对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于 ...
- 练习题 --- 写出5种css定位语法
写出至少5种css语法(每种语法不一样)
- 教你如何写出高效整洁的 css 代码——css优化(转载)
css 写起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在 css 书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的 css 代码原则. css 优化的原则 1. ...
- 理解SQL原理,写出高效代码
做软件开发的,大部分人都离不开跟数据库打交道,特别是erp开发的,跟数据库打交道更是频繁,存储过程动不动就是上千行,数据量大,人员流动大,那么我们还能保证下一段时间系统还能流畅的运行吗?我们还能保证下 ...
- 理解SQL原理，写出高效的SQL语句
我们做软件开发的,大部分人都离不开跟数据库打交道,特别是erp开发的,跟数据库打交道更是频繁,存储过程动不动就是上千行,如果数据量大,人员流动大,那么我们还能保证下一段时间系统还能流畅的运行吗?我们还 ...
- NFA引擎匹配原理
1 为什么要了解引擎匹配原理 一个个音符杂乱无章的组合在一起,弹奏出的或许就是噪音,同样的音符经过作曲家的手,就可以谱出非常动听的乐曲,一个演奏者同样可以照着乐谱奏出动听的乐曲,但他/她或 ...
- 正则表达式: NFA引擎匹配原理
NFA引擎匹配原理 1 为什么要了解引擎匹配原理 一个个音符杂乱无章的组合在一起,弹奏出的或许就是噪音,同样的音符经过作曲家的手,就可以谱出非常动听的乐曲,一个演奏者同样可以照着乐谱奏出动 ...
- css写出三角形（兼容IE）
css写出三角形 利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; bo ...
随机推荐
- Codeforces Round #503 (by SIS, Div. 2) D. The hat
有图可以直观发现,如果一开始的pair(1,1+n/2)和pair(x, x+n/2)大小关系不同 那么中间必然存在一个答案 简单总结就是大小关系不同,中间就有答案 所以就可以使用二分 #includ ...
- PHASER3 设置场景SCENE SLEEPING休眠和WAKE唤醒
A good way to set scene stop when hidden and run while visible again ! 使用sleep和wake方法的好处: 1.可以彻底让sce ...
- 随笔1-本想吐槽cnblog编辑器，但是今天猛然发现它竟然这么干净简洁
日常用写作编辑器 多少和我一样有选择综合征的? 不愿意写博客的其中一个非常重要的原因是编辑器不好用! 博客的迁移是相当麻烦的! 所以定下cnblog写东西也是一种勇气!鼓励.... FlashNote ...
- 学习GIT 你只要这一篇（转）
http://blog.csdn.net/afei__/article/details/51476529 安装之后第一步 安装 Git 之后,你要做的第一件事情就是去配置你的名字和邮箱,因为每一次提交 ...
- USACO 3.3.1 Riding the Fences 骑马修栅栏（欧拉回路）
Description 农民John每年有很多栅栏要修理.他总是骑着马穿过每一个栅栏并修复它破损的地方. John是一个与其他农民一样懒的人.他讨厌骑马,因此从来不两次经过一个一个栅栏.你必须编一个程 ...
- scrum立会报告+燃尽图（第三周第四次）
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2286 项目地址:https://coding.net/u/wuyy694 ...
- 六周psp
本周psp 本周进度条 代码累积折线图 博文字数累积折线图 饼状图
- 汉诺塔python实现
下载汉诺塔ppt def move(n,A,B,C): if n == 1: print(A,'->',C) else: move(n-1,A,C,B) print(A,'->',C) m ...
- 《IT小小鸟》读后感
我是来自大一的小小鸟,想要飞却没有一对坚硬的臂膀! 看了<IT小小鸟>了解了学长和学姐们的大学经历后开始让我反思我的大学生活.学长和学姐们通过自身的经历来告诉我们,应该怎么样规划好大学生涯 ...
- 第九章 Mysql函数
简介 数学函数:处理数字 字符串函数:处理字符串 日期和时间函数:处理日期和时间,获取时间 条件判断函数:控制条件选择 系统信息函数:获取MySQL系统信息,包括数据库名称,当前用户名和数据库版本 加 ...