用了这么多年的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
>
|
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开发系列
本文转自BearRui(AK-47)博客园博客，原文链接：http://www.cnblogs.com/BearsTaR/archive/2010/06/08/efficient_css.html ，如需转载请自行联系原作者
