Understand the search and matching principle of CSS to make CSS more concise and efficient_Experience exchange

Look at a simple CSS:

DIV#divBox p span.red{color:red;}. According to custom, our understanding of this CSS is that the browser first searches for the DIV element with the id of divBox. When found Then, search for all p elements under it, and then search for all span elements. When it is found that the class of span is red, apply the style. Such a simple and easy-to-understand principle, but this understanding is completely opposite and wrong.


Matching principle:

Browser CSS matching does not search from left to right, but from right to left. For example, the DIV#divBox p span.red{color:red;} mentioned earlier, the browser's search sequence is as follows:

First search for all span elements with class='red' in the html, and then search again after finding them. Check whether there is a p element in its parent element, and then determine whether there is a div element with the id divBox in the parent element of p. If both exist, it will match.

The advantage of the browser searching from right to left is to filter out some irrelevant style rules and elements as early as possible. For example, the following html and css: