（一）问题描述
1、css规则匹配规则
2、css文件匹配顺序
3、.a, .b, .a .b, .a.b, .b.a是如何匹配元素
（二）问题解答
1、css样式匹配规则
在css样式表中，为了提高元素匹配效率，样式匹配是从右到左进行匹配的，例如下面的的一条样式
p a .a { background-color: red; }
如果按从左到右查找，哪会先查找到很多不相关的p和span元素。而如果按从左到右的方式进行查找，则首先就查找到<a class='a'>的元素。firefox称这种查找方式为key selector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则，上面的key就是a.a。
这条css样式，首先查找所有的a链接，然后匹配元素的样式为.a，在匹配是不是p标签。
这样做的目的就从底层向上查找，增加匹配效率
2、css文件匹配顺序
如果css文件中，多条样式是针对同一个属性做了修改，在元素样式表中都引入了这些样式，则最终样式是匹配css文件越往后定义的规则，例如下面的样式：
.a { background-color: green; }
.b { background-color: red; }
.c { background-color: yellow; }
页面元素：
<div class="c b a">匹配规则c，背景为黄色</div><div class="a b c">匹配规则c，背景为黄色</div>
<div class="c a b">匹配规则c，背景为黄色</div>
注意一点的是，元素中的class的类名顺序是和css文件规则定义顺序一样，和class定义顺序无关，一定要记住这一点。
上面定义的div，样式规则同时匹配样式c， b，a，由于在样式表中的样式定义顺序为a、b、c，所以div的背景颜色都是黄色。
3、.a, .b, .a .b, .a.b, .b.a是如何匹配元素
其实理解了问题2，那么对于问题3就更容易区分了，例如下面测试例子：
样式表：
.a { background-color: green; }
.b { background-color: red; }
.a .b { background-color: blue; }
.b .a { background-color: black; }
.a.b { background-color: gray; }
.b.a { background-color: aqua; }
1）父子元素匹配
.a .b { background-color: blue; }
.b .a { background-color: black; }
这两条规则.a .b之间是有空格的，表示是.a 元素的子元素样式.b的样式，和.a样式无关，匹配元素形如：
<div class="a">a
<div class="b">b</div>
</div>
这里对与父元素div，匹配的样式是.a，而子元素匹配的.a .b，所以最终结果是：
2）同级元素匹配
.a.b { background-color: gray; }
.b.a { background-color: aqua; }
这两条规则.a.b之间没有空格，表示元素同时使用.a、.b样式，形如：
<div class="a b">a b</div>
或者
<div class="b a">b a</div>
表示两个div的样式都是.a .b，和class中样式顺序无关，而最终使用样式只和在样式表中定义的顺序有关，所以这二者都匹配规则2，因为规则2是在规则1后面定义的。
（三）疑问扩展
在jQuery框架使用中，通过类似css选择器查找元素时，效率会较高的原因就是css的从右向左的匹配规则，避免了很多无用查找，从而提高了查找效率。
如果对你有帮助，劳烦点个赞吧，谢谢！-V-
