首先来了解下页面是如何渲染的：首先浏览器会把HTML文档解析为DOM tree，然后解析CSS为CSS tree，接着把DOM tree和CSS tree组合构建成为一棵可以渲染的render tree，最终用来绘图，也就是最终呈现在我们面前的页面。
因为DOM可能是很复杂的结构，因此一种高效的能把DOM tree和CSS tree组合构建的方法就显得尤为必要。
把DOM tree和CSS tree组合构建的过程就是解析CSS选择器和DOM元素一一对应的过程。
至此我们大概了解了页面的渲染过程。
先来看从左往右解析CSS选择器的工作方式：
<body>
<div class="box">
<p>
<span class="red">hello</span>
</p>
</div>
<div class="box">
<div>
<span class="red">hello</span>
</div>
</div>
<div class="box">
<p>
<span class="bule">hello</span>
</p>
</div>
<p class='box'></p>
</body>
// css
.box p span.red{
color: red;
}
首先查找类名为box的元素 找到4个符合的元素
然后再遍历第一步的结果，查找p标签，有2个元素符合
最后查找类名为red的span元素，精确找到目标。
我们从最上层依次向下遍历，中间做了大量无用搜索，导致效率低下。
再来看看从右至左的解析顺序
先查找类名为red的span元素 找到2个符合的元素
遍历第一遍的结果，向上查找p元素 找到唯一的精确匹配
明显可以看出从右至左的解析方式高效很多，这在复杂的DOM结构中尤其明显，
总的来说 从右至左的解析方式能最快速的精确定位，减少检索次数。
