瀏覽器如何解析css選擇器？

瀏覽器會『從右往左』解析CSS選擇器。
我們知道DOM Tree與Style Rules合成為 Render Tree，實際上是需要將Style Rules附着到DOM Tree上，
因此需要根據選擇器提供的信息對DOM Tree進行遍歷，才能將樣式附着到對應的DOM元素上。
以下這段css為例
<style type="text/css">
.mod-nav h3 span {font-size: 16px;}
</style>
若從左向右的匹配，過程是：

從 .mod-nav 開始，遍歷子節點 header 和子節點 div
然后各自向子節點遍歷。在右側 div 的分支中
最后遍歷到葉子節點 a ，發現不符合規則，需要回溯到 ul 節點，再遍歷下一個 li-a，一顆DOM樹的節點動不動上千，這種效率很低。

如果從右至左的匹配：

先找到所有的最右節點 span，對於每一個 span，向上尋找節點 h3
由 h3再向上尋找 class="mod-nav" 的節點
最后找到根元素 html 則結束這個分支的遍歷。


后者匹配性能更好，是因為從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節點（葉子節點）；而從左向右的匹配規則的性能都浪費在了失敗的查找上面。