CSS规则下（比如 .box span），会形成一条符合规则的索引树，树由上至下的节点是规则中从右向左的一个个选择符匹配的节点。
从左到右的匹配规则
通常思维是选择器指定越详细，则越容易匹配，性能越好。这种观点建立的基础是，对每一个CSS样式去查询匹配dom中的节点，那么选择器的详细程度越高，就越能减少查询的冗余，性能越好。例如：
// 布局
<div class="box">
<div class="div1">
<span class="span1">测试1</span>
</div>
<div class="div2">
<span class="span2">测试2</span>
</div>
</div>
.box .span1{} // 样式1
.box .div1 .span1{} // 样式2按照上述规则，样式1会比样式2多做一次比较，即对span2的比较。这种CSS查询匹配dom节点的方式，就是常说的从左到右的匹配规则（针对CSS选择器而言）——针对样式1，从左到右匹配5次，从右到左匹配7次。
从右到左的匹配规则
还有一种思维是选择器指定越精简，则越容易匹配，性能越好。这种观点建立的基础是，对每一个dom节点去查询匹配CSS中的样式，那么选择器的详细程度越高，查询匹配的次数就越多，性能越差。例如：
// 布局
<div class="box">
<div class="div1">
<span class="span">测试1</span>
</div>
</div>
.div1 .span{} // 样式1
.box .div1 .span{} // 样式2按照上述规则，针对“测试1”的样式匹配，样式1要比样式2少1次匹配。这种dom节点查询匹配CSS选择器的方式，就是常说的从右到左的匹配规则（针对CSS选择器而言）——针对样式1，从左到右匹配3次，从右到左匹配2次。
很明显，两种匹配规则的性能差别很大。是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点）；而从左向右的匹配规则的性能都浪费在了失败的查找上面。
总结
CSS中更多的选择器是不会匹配的，所以在考虑性能问题时，需要考虑的是如何在选择器不匹配时提升效率，应该尽量较少选择器组合中的冗余。从右向左匹配就是为了达成这一目的的，通过这一策略能够使得CSS选择器在不匹配的时候效率更高。