了解CSS的查找匹配原理，让CSS更简洁、高效
DIV#divBox p span.red{color:red;}，按习惯我们对这个 CSS 的理解是，浏览器先查找 id 为 divBox 的 DIV 元素，当找到后，再找其下的所有 p 元素，
然后再查找所有 span 元素，当发现有 span 的 class 为 red 的时候，就应用该 style。多么简单易懂的原理，可是这个理解却是完完全全相反、错误的。
用了这么多年的 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:
1 2 3 4 5 6 7 8 9 10 11 | <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 开发系列