浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如之前说的DIV#divBoxpspan.red{color:red;}，浏览器 的查找顺序如下：先查找html中所有class=’red’的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为 divBox的div元素，如果都存在则CSS匹配上。
浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。firefox称这种查 找方式为keyselector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则，上面的key就是span.red。
所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找，下面列出一些我们常见的写CSS犯一些低效错误：
1、不要在ID选择器前使用标签名
一般写法：DIV#divBox
更好写法：#divBox
解释：因为ID选择器是唯一的，加上div反而增加不必要的CSS匹配。
2、不要在class选择器前使用标签名
一般写法：span.red
更好写法：.red
解释：同第一条，但如果你定义了多个.red，而且在不同的元素下是样式不一样，则不能去掉，比如你css文件中定义如下：
- p.red{color:red;}
- span.red{color:#ff00ff}
如果是这样定义的就不要去掉，去掉后就会混淆，不过建议最好不要这样写
3、尽量少使用层级关系
一般写法：#divBoxp.red{color:red;}
更好写法：.red{..}
4、使用class代替层级关系
一般写法：#divBoxullia{display:block;}
更好写法：.block{display:block;}
5、在css渲染效率中id和class的效率是基本相当的
class最在第一次载入中被缓存，在层叠中会有更加好的效果，在根部元素采用id会具有更加好（id有微妙的速度优势）。
其他细节问题:
- border:none;与border:0;的区别
border:o会给浏览器保留border-style,border-color等空间,所以性能上有些许差别.
- 尽可能提供详尽的css属性
- 不宜过小的背景图片平铺
过小的图片要平铺出效果来需要大量的平铺计算,是种严重的消耗.
- 尽量不要用ie的滤镜
如果实在需要在ie6中使用透明滤镜,请指定只有ie6使用此滤镜.
- 不要用通配符解决浏览器渲染差异
类似:*{ margin:0; padding:0;}这样的重置首先对于匹配来说是需要消耗性能的,然后就是只应该给需要这个功能的事物赋予功能,而且在重置浏览器样式的时候要注意,有些样式不要随便重置,例如:不要为了定位方便,将所有的元素设置成position:relative;要知道在ie6下relative会引起一些不常见的问题.
