浏览器是怎样解析css选择器的？

        浏览器会【从左到右】解析CSS选择器。

        我们知道DOMTree与StyleRules合成为RenderTree，实际上是需要将StyleRules附着到DOMTree上，因此需要根据选择器提供的信息对DOMTree进行遍历，才能将样式附着到对应的DOM元素上。以下这段css为例：

        <style type="text/css">

                .mode-nav h3 span{font-size:16px;}

        </style>

若从左向右的匹配，过程是：        

        从.mode-nav开始，遍历子节点header和子节点div然后各自向子节点遍历。

        在右侧div的分支中，最后遍历到子节点a，发现不符合规则，需要回溯到ul节点，在遍历下一个li-a，一颗DOM数的节点动不动上千，这种效率很低。

如果从右至左的匹配：

        先找到所有的最右节点span,对于每一个span，向上寻找节点h3;

        由h3再向上寻找class="mode-nav"的节点；

        最后找到根元素html则结束这个分支的遍历。

        后者匹配性能更好，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点；而从左到右的匹配规则的性能都浪费在了失败的查找上面。