Why must the typesetting engine parse the CSS selector from right to left?

First we need to look at when the "parsing" of the selector is going on.

The main reference to this article "how browsers work" (HTTP//taligarsiel.com/projects/howbrowserswork1.htm), the browser rendering process to Examples of WebKit are as follows:

HTML is parsed to generate the DOM tree (which we are familiar with), and after the parsing of the CSS, it is necessary to parse the results with the contents of the DOM tree to create a Render tree, which is ultimately used for drawing. The elements in the Render Tree (referred to as "frames" in WebKit) correspond to DOM elements, but not one by one: one DOM element may correspond to multiple renderer, such as text wrapping, when different rows become Render a tree of different renderer. There are also DOM elements that are completely ignored by the Render Tree, such as display:none elements.

When creating a Render Tree (the "attachment" process in WebKit), the browser will determine what renderer to generate based on the parsing results (Style Rules) of the CSS for each element in the DOM tree. For each DOM element, you must find the compliant selector in all Style rules and merge the corresponding rules. The "parsing" of the selector is actually performed here, and when traversing the DOM Tree, look for the corresponding selector from the Style Rules.

Because all style rules can be large, and the vast majority do not match the current DOM elements (because of the large number of regular index trees), there is a quick way to judge that " this selector does not match the current element " is extremely important.

If the forward parsing, for example "div Div p em", we first have to check the current element to the entire HTML path, find the topmost div, and then look down, if you encounter a mismatch, you must go back to the top of the Div, and then to match the first Div in the selector, backtracking Several times to determine the match or not, the efficiency is very low.

Inverse matching is different, if the current DOM element is a div, rather than selector the last em, it can be ruled out in one step . The parent node is always searched upward for validation only if it is matched.

But because the matching situation is much lower than the mismatch, the advantage of reverse matching is huge. At the same time we can see that adding "*" at the end of the selector greatly reduces this advantage, which is why many optimization principles refer to avoiding the addition of wildcards at the end of the selector.

Why must the typesetting engine parse the CSS selector from right to left?