How browser parses css selectors?

The browser "right to left" parse CSS selectors.
We know that DOM Tree and Style Rules synthesize Render Tree, in fact, is the need to Style Rules attached to the DOM Tree,
it is necessary to traverse the DOM Tree selector based on information provided to the style attached to the corresponding DOM elements.
The following Example This css
<style type = "text / css">
.mod-nav H3 span {font-size: 16px;}
</ style>
, if matching from left to right, the process is:

from .mod-nav start, walk the child header nodes and sub-nodes div
then traverse to each child node. Div branch on the right side in
the final traverse to the leaf nodes a, found not to comply with the rules, you need to go back to ul node, and then traverse the next li-a, a DOM node tree of thousands at every turn, this efficiency is very low.

If the right-to-left match: the

first find all the rightmost node span, for each span, node h3 looking up
from the h3 and then look up class = "mod-nav" node
and finally found the root element html the end of this branch traversal.


The latter match better performance because of the match from right to left in the first step to filter out a lot of the right-most node does not meet the conditions (leaf node); from left to right and the performance of matching rules are wasted the failure to find it.