（一）问题描述

        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-