了解CSS的查找匹配原理，让CSS更简洁、高效

首先，我们来看一个简单的例子CSS：

    DIV#divBox p .red{color:red;}

按习惯我们对这个CSS 的理解是，浏览器先查找id为divBox的div元素，然后匹配它所有的p元素，然后为p元素下所有类为为red的对象应用样式。

看起来好像事情是如此简单，展示结果也正确。然后事实上这个理解却是错误的。

恰恰相反，浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如上文中的例子，浏览器的查找顺序如下：

先查找html中所有class='red'的所有元素，找到后，再筛选出父元素为p的所有元素。得到结果，再进一步判断满足条件的p是否包含在id为divBox，最后再判断divBox的tag是不是div!

这样，事情就复杂了，但是为什么浏览器会这么处理呢？

因为浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素，以实现最优匹配。

如果按从左到右查找，就会先匹配到大量不相关的div和p元素。firefox称这种查找方式为key selector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则，上面的key就是.red。

即然知道理它的处理规则，我们可以来优化我们的CSS，让其简洁、高效:

所谓高效的CSS就是让浏览器在查找样式匹配的元素的时候尽量进行少的查找，下面列出一些我们常见的CSS问题：

1.不要在ID选择器前使用标签名

一般写法：DIV#divBox
更好写法：#divBox
解释： 因为ID选择器是唯一的，加上div反而增加不必要的匹配。

2.不要再class选择器前使用标签名

一般写法：span.red
更好写法：.red
解释： 同第一条，但如果你定义了多个.red，而且在不同的元素下是样式不一样，则不能去掉，比如：
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;} 

作者：beifengwang 原文地址：http://blog.itpub.net/29212814/viewspace-1133752/